{"id":59588,"date":"2026-04-19T22:00:57","date_gmt":"2026-04-19T22:00:57","guid":{"rendered":"https:\/\/7grounds.org\/seven-offer\/"},"modified":"2026-04-19T22:00:57","modified_gmt":"2026-04-19T22:00:57","slug":"seven-offer","status":"publish","type":"page","link":"https:\/\/7grounds.org\/ar\/seven-offer\/","title":{"rendered":"Seven Offer"},"content":{"rendered":"<div class=\"seven-offer-wrapper notranslate\" dir=\"rtl\" lang=\"ar\">\n<div class=\"min-h-screen bg-[#08111d] text-white relative overflow-hidden\">\n    <div class=\"absolute inset-0 overflow-hidden pointer-events-none\">\n        <div class=\"absolute -top-24 left-[-10%] h-72 w-72 rounded-full bg-cyan-400\/10 blur-3xl\"><\/div>\n        <div class=\"absolute top-1\/3 right-[-5%] h-80 w-80 rounded-full bg-amber-200\/10 blur-3xl\"><\/div>\n        <div class=\"absolute bottom-0 left-1\/3 h-72 w-72 rounded-full bg-sky-300\/10 blur-3xl\"><\/div>\n    <\/div>\n\n    <main class=\"relative mx-auto max-w-7xl px-6 py-8 md:px-10 lg:px-12\">\n\n        <!-- HEADER \/ HERO -->\n        <header class=\"rounded-[28px] border border-white\/10 bg-white\/5 backdrop-blur-xl\">\n            <nav class=\"flex items-center justify-between px-6 py-5 md:px-8\">\n                <div translate=\"no\">\n                    <div lang=\"en\" class=\"text-xs uppercase tracking-[0.3em] text-white\/50\">7grounds<\/div>\n                    <div lang=\"en\" class=\"text-xl font-semibold tracking-wide\">Seven Offer<\/div>\n                <\/div>\n                <div class=\"hidden items-center gap-8 text-sm text-white\/70 md:flex\">\n                    <a href=\"#services\" class=\"transition hover:text-white\">\u0627\u0644\u062e\u062f\u0645\u0627\u062a<\/a>\n                    <a href=\"#offer\" class=\"transition hover:text-white\">\u0639\u0631\u0636\u0643<\/a>\n                <\/div>\n                <div class=\"flex items-center gap-2\">\n                    <a href=\"https:\/\/7grounds.org\/ar\/wp-json\/wp\/v2\/pages\/59588?lang=en\" class=\"rounded-full border border-white\/10 bg-white\/5 px-3 py-2 text-xs font-medium text-white\/70 transition hover:bg-white\/10 hover:text-white\">English<\/a>\n                    <a href=\"#services\" class=\"rounded-full border border-white\/15 bg-white\/10 px-4 py-2 text-sm font-medium transition hover:bg-white\/15\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0622\u0646<\/a>\n                <\/div>\n            <\/nav>\n\n            <section class=\"grid gap-8 px-6 pb-6 pt-6 md:px-8 md:pb-8 lg:grid-cols-[1.15fr_0.85fr] lg:items-end lg:gap-12\">\n                <div>\n                    <div class=\"mb-4 inline-flex items-center rounded-full border border-amber-200\/20 bg-amber-100\/10 px-3 py-1 text-xs tracking-[0.2em] text-amber-100\/80\">\u0645\u0646\u0634\u0626 \u0627\u0644\u0639\u0631\u0636 \u0627\u0644\u0645\u0628\u062f\u0626\u064a<\/div>\n                    <h1 class=\"max-w-3xl text-3xl font-semibold leading-tight md:text-5xl md:leading-[1.15]\">\n                        <span class=\"seven-highlight\">\u0635\u0645\u0651\u0645 \u0639\u0631\u0636\u0643 \u0627\u0644\u062e\u0627\u0635 \u0644\u0645\u0634\u0631\u0648\u0639\u0643.<\/span>\n                    <\/h1>\n                    <p class=\"mt-4 max-w-2xl text-base leading-7 text-white\/70 md:text-lg\">\u0628\u062f\u0644 \u0645\u0627 \u062a\u0628\u062d\u062b \u0639\u0646 \u062e\u062f\u0645\u0627\u062a \u0645\u062a\u0641\u0631\u0642\u0629\u060c \u0627\u062e\u062a\u0631 \u0645\u0627 \u064a\u062d\u062a\u0627\u062c\u0647 \u0645\u0634\u0631\u0648\u0639\u0643 \u0628\u062f\u0642\u0629\u060c \u0648\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0639\u0631\u0636 \u0645\u0628\u062f\u0626\u064a \u0648\u0627\u0636\u062d \u064a\u0639\u0643\u0633 \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629 \u0644\u0643\u0644 \u062e\u0637\u0648\u0629.<\/p>\n                    <div class=\"mt-6 flex flex-wrap gap-3\">\n                        <a href=\"#services\" class=\"seven-hero-cta rounded-full bg-white px-5 py-3 text-sm font-semibold text-[#08111d] transition hover:opacity-90 inline-flex items-center gap-2\">\n                            <span>\u0627\u0628\u062f\u0623 \u0627\u0644\u0622\u0646<\/span>\n                            <span class=\"seven-bounce-down text-base\" aria-hidden=\"true\">\u2193<\/span>\n                        <\/a>\n                        <a href=\"#collab\" class=\"rounded-full border border-white\/15 bg-white\/5 px-5 py-3 text-sm font-semibold text-white transition hover:bg-white\/10\">\u0643\u064a\u0641 \u0646\u062a\u0639\u0627\u0648\u0646 \u0645\u0639\u0643<\/a>\n                    <\/div>\n                <\/div>\n\n                <div class=\"rounded-[24px] border border-white\/10 bg-[#0c1827]\/90 p-5 shadow-2xl shadow-black\/20\">\n                    <p class=\"text-sm leading-7 text-white\/75\">\u0641\u064a Seven Grounds\u060c \u0646\u0624\u0645\u0646 \u0623\u0646 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0644\u064a\u0633 \u062e\u062f\u0645\u0627\u062a \u0645\u0646\u0641\u0635\u0644\u0629\u2026 \u0628\u0644 \u0645\u0646\u0638\u0648\u0645\u0629 \u0645\u062a\u0631\u0627\u0628\u0637\u0629 \u062a\u064f\u0628\u0646\u0649 \u062d\u0648\u0644 \u0647\u062f\u0641 \u0648\u0627\u062d\u062f: \u0627\u0644\u0646\u0645\u0648 \u0627\u0644\u062d\u0642\u064a\u0642\u064a. \u0644\u0647\u0630\u0627 \u0635\u0645\u0645\u0646\u0627 \u0644\u0643 \u062a\u062c\u0631\u0628\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u062a\u0645\u0643\u0651\u0646\u0643 \u0645\u0646 \u0627\u062e\u062a\u064a\u0627\u0631 \u0645\u0627 \u064a\u0646\u0627\u0633\u0628\u0643\u060c \u0648\u0631\u0624\u064a\u0629 \u0639\u0631\u0636\u0643 \u0628\u0634\u0643\u0644 \u0645\u0628\u0627\u0634\u0631 \u0648\u0627\u062d\u062a\u0631\u0627\u0641\u064a.<\/p>\n                <\/div>\n            <\/section>\n        <\/header>\n\n        <!-- SERVICES BUILDER -->\n        <section id=\"services\" class=\"mt-10 md:mt-12\">\n            <!-- STEPPER -->\n            <div class=\"seven-stepper mb-10 flex items-center justify-center gap-2 md:gap-4\">\n                <div class=\"seven-step seven-step-active flex items-center gap-2 md:gap-3\">\n                    <span class=\"seven-step-dot flex h-8 w-8 items-center justify-center rounded-full border text-xs font-semibold\">1<\/span>\n                    <span class=\"text-xs md:text-sm text-white\/80\">\u0627\u062e\u062a\u0631 \u062e\u062f\u0645\u0627\u062a\u0643<\/span>\n                <\/div>\n                <span class=\"h-px w-6 md:w-12 bg-white\/15\"><\/span>\n                <div class=\"seven-step flex items-center gap-2 md:gap-3\">\n                    <span class=\"seven-step-dot flex h-8 w-8 items-center justify-center rounded-full border text-xs font-semibold\">2<\/span>\n                    <span class=\"text-xs md:text-sm text-white\/50\">\u0641\u0639\u0651\u0644 Impact<\/span>\n                <\/div>\n                <span class=\"h-px w-6 md:w-12 bg-white\/15\"><\/span>\n                <div class=\"seven-step flex items-center gap-2 md:gap-3\">\n                    <span class=\"seven-step-dot flex h-8 w-8 items-center justify-center rounded-full border text-xs font-semibold\">3<\/span>\n                    <span class=\"text-xs md:text-sm text-white\/50\">\u0623\u0631\u0633\u0644 \u0639\u0631\u0636\u0643<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- DYNAMIC HEADLINE -->\n            <div class=\"text-center mx-auto max-w-3xl\">\n                <h2 class=\"seven-builder-headline text-4xl font-semibold leading-tight md:text-6xl md:leading-[1.1]\">\n                    <span class=\"seven-highlight\">\u0627\u062e\u062a\u0631. \u0627\u062f\u0645\u062c. \u0634\u0627\u0647\u062f \u0639\u0631\u0636\u0643.<\/span>\n                <\/h2>\n                <p class=\"mt-5 text-base leading-7 text-white\/65 md:text-lg\">\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0623\u064a \u062e\u062f\u0645\u0629 \u0644\u0625\u0636\u0627\u0641\u062a\u0647\u0627 \u0625\u0644\u0649 \u0639\u0631\u0636\u0643. \u0627\u062c\u0645\u0639 \u0623\u0643\u062b\u0631 \u0645\u0646 \u0645\u0633\u0627\u0631 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u062e\u0635\u0648\u0645\u0627\u062a \u062a\u0644\u0642\u0627\u0626\u064a\u0629.<\/p>\n            <\/div>\n\n            <!-- SERVICE CARDS -->\n            <div class=\"mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3\" id=\"seven-service-grid\">\n                                <button type=\"button\"\n                        class=\"seven-service-card group relative text-start rounded-[20px] border border-white\/10 bg-[#0c1827]\/80 p-5 transition duration-200\"\n                        data-service-id=\"social\"\n                        aria-pressed=\"false\">\n\n                    <!-- HEADER: icon + title + check -->\n                    <div class=\"flex items-start gap-3\">\n                        <div class=\"seven-service-icon flex h-11 w-11 flex-none items-center justify-center rounded-xl bg-white\/10 text-amber-100 transition\">\n                            <svg width=\"22\" height=\"22\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M18 10a3 3 0 1 0-2.83-4H12.83a3 3 0 1 0 0 2h2.34A3 3 0 0 0 18 10Zm-6 4a3 3 0 1 0-2.83-4H8a3 3 0 1 0 0 2h1.17A3 3 0 0 0 12 14Zm6 4a3 3 0 1 0-2.83-4h-2.34a3 3 0 1 0 0 2h2.34A3 3 0 0 0 18 18Z\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"\/><\/svg>\n                        <\/div>\n                        <div class=\"flex-1 min-w-0\">\n                            <h3 class=\"text-base font-semibold md:text-[17px] leading-tight text-white\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627<\/h3>\n                            <div lang=\"en\" class=\"mt-1 text-[10px] uppercase tracking-[0.22em] text-amber-200\/55\" translate=\"no\">Content System<\/div>\n                        <\/div>\n                        <div class=\"seven-check hidden flex h-7 w-7 flex-none items-center justify-center rounded-full bg-amber-300 text-[#08111d] shadow-lg shadow-amber-500\/20\">\n                            <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                        <\/div>\n                    <\/div>\n\n                    <!-- PRICE row (always visible) -->\n                    <div class=\"mt-4 flex items-baseline gap-2\" translate=\"no\">\n                        <span class=\"text-[10px] uppercase tracking-wider text-white\/40\">\u0627\u0628\u062a\u062f\u0627\u0621\u064b \u0645\u0646<\/span>\n                        <span class=\"text-xl font-semibold text-white\">$800<\/span>\n                        <span class=\"text-[11px] text-white\/45\">\/ \u0634\u0647\u0631\u064a\u064b\u0627<\/span>\n                    <\/div>\n\n                    <!-- EXPANDABLE: description + features (hidden by default, shown on hover\/selected) -->\n                    <div class=\"seven-card-body overflow-hidden max-h-0 transition-all duration-300 ease-out\">\n                        <div class=\"pt-4 mt-4 border-t border-white\/10\">\n                            <p class=\"text-sm leading-6 text-white\/70\">\u0628\u0646\u0627\u0621 \u062d\u0636\u0648\u0631 \u0631\u0642\u0645\u064a \u0645\u0646\u0638\u0645\u060c \u064a\u0639\u0643\u0633 \u0647\u0648\u064a\u0629 \u0645\u0634\u0631\u0648\u0639\u0643 \u0648\u064a\u062d\u0648\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0625\u0644\u0649 \u0623\u062f\u0627\u0629 \u062c\u0630\u0628 \u062d\u0642\u064a\u0642\u064a\u0629.<\/p>\n                            <ul class=\"mt-3 grid gap-1.5\">\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u062a\u062e\u0637\u064a\u0637 \u0645\u062d\u062a\u0648\u0649 \u0634\u0647\u0631\u064a \u0645\u062e\u0635\u0635<\/span>\n                                <\/li>\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u0643\u062a\u0627\u0628\u0629 \u0645\u062d\u062a\u0648\u0649 \u0627\u062d\u062a\u0631\u0627\u0641\u064a (Hooks + \u0639\u0631\u0648\u0636 + CTA)<\/span>\n                                <\/li>\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u0646\u0634\u0631 \u0645\u0646\u062a\u0638\u0645 \u0648\u0645\u0646\u0638\u0645 \u0644\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0648\u0627\u0644\u0645\u062a\u0627\u0628\u0639\u064a\u0646<\/span>\n                                <\/li>\n                                                            <\/ul>\n                        <\/div>\n                    <\/div>\n\n                    <!-- FOOTER: SELECT label -->\n                    <div class=\"mt-4 flex items-center justify-between border-t border-white\/10 pt-3\">\n                        <span class=\"text-[10px] uppercase tracking-wider text-white\/35 seven-card-hint\">\u0645\u0627\u0630\u0627 \u064a\u0634\u0645\u0644<\/span>\n                        <span class=\"seven-select-label inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-200\/70\">\n                            <span class=\"seven-select-icon inline-flex h-5 w-5 items-center justify-center rounded-full border border-amber-200\/40 text-amber-200\">\n                                <svg class=\"seven-plus-icon\" width=\"10\" height=\"10\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 5v14M5 12h14\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><\/svg>\n                                <svg class=\"seven-check-icon hidden\" width=\"11\" height=\"11\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                            <\/span>\n                            <span class=\"seven-select-text\">\u0627\u062e\u062a\u0631<\/span>\n                        <\/span>\n                    <\/div>\n                <\/button>\n                                <button type=\"button\"\n                        class=\"seven-service-card group relative text-start rounded-[20px] border border-white\/10 bg-[#0c1827]\/80 p-5 transition duration-200\"\n                        data-service-id=\"ads\"\n                        aria-pressed=\"false\">\n\n                    <!-- HEADER: icon + title + check -->\n                    <div class=\"flex items-start gap-3\">\n                        <div class=\"seven-service-icon flex h-11 w-11 flex-none items-center justify-center rounded-xl bg-white\/10 text-amber-100 transition\">\n                            <svg width=\"22\" height=\"22\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M3 10v4a2 2 0 0 0 2 2h2l7 4V4l-7 4H5a2 2 0 0 0-2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"\/><path d=\"M17 8a5 5 0 0 1 0 8\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>\n                        <\/div>\n                        <div class=\"flex-1 min-w-0\">\n                            <h3 class=\"text-base font-semibold md:text-[17px] leading-tight text-white\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062d\u0645\u0644\u0627\u062a \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u064a\u0629<\/h3>\n                            <div lang=\"en\" class=\"mt-1 text-[10px] uppercase tracking-[0.22em] text-amber-200\/55\" translate=\"no\">Sales Engine<\/div>\n                        <\/div>\n                        <div class=\"seven-check hidden flex h-7 w-7 flex-none items-center justify-center rounded-full bg-amber-300 text-[#08111d] shadow-lg shadow-amber-500\/20\">\n                            <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                        <\/div>\n                    <\/div>\n\n                    <!-- PRICE row (always visible) -->\n                    <div class=\"mt-4 flex items-baseline gap-2\" translate=\"no\">\n                        <span class=\"text-[10px] uppercase tracking-wider text-white\/40\">\u0627\u0628\u062a\u062f\u0627\u0621\u064b \u0645\u0646<\/span>\n                        <span class=\"text-xl font-semibold text-white\">$600<\/span>\n                        <span class=\"text-[11px] text-white\/45\">\/ \u0634\u0647\u0631\u064a\u064b\u0627<\/span>\n                    <\/div>\n\n                    <!-- EXPANDABLE: description + features (hidden by default, shown on hover\/selected) -->\n                    <div class=\"seven-card-body overflow-hidden max-h-0 transition-all duration-300 ease-out\">\n                        <div class=\"pt-4 mt-4 border-t border-white\/10\">\n                            <p class=\"text-sm leading-6 text-white\/70\">\u0625\u062f\u0627\u0631\u0629 \u0630\u0643\u064a\u0629 \u0644\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062a\u0631\u0643\u0632 \u0639\u0644\u0649 \u0627\u0644\u0648\u0635\u0648\u0644 \u0644\u0644\u0639\u0645\u0644\u0627\u0621 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u064a\u0646 \u0648\u062a\u062d\u0642\u064a\u0642 \u0646\u062a\u0627\u0626\u062c \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0642\u064a\u0627\u0633.<\/p>\n                            <ul class=\"mt-3 grid gap-1.5\">\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u0625\u0646\u0634\u0627\u0621 \u0648\u0625\u062f\u0627\u0631\u0629 \u062d\u0645\u0644\u0627\u062a Meta \/ TikTok \/ Google<\/span>\n                                <\/li>\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u062a\u0642\u0633\u064a\u0645 \u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0648\u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0643\u0631\u064a\u0627\u062a\u064a\u0641<\/span>\n                                <\/li>\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u062a\u062d\u0633\u064a\u0646 \u064a\u0648\u0645\u064a \u0644\u0644\u0623\u062f\u0627\u0621<\/span>\n                                <\/li>\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u062a\u0648\u062c\u064a\u0647 \u0645\u0628\u0627\u0634\u0631 \u0644\u0644\u0648\u0627\u062a\u0633\u0627\u0628 \u0623\u0648 \u0627\u0644\u0637\u0644\u0628 \u0628\u0627\u0644\u0645\u0648\u0642\u0639<\/span>\n                                <\/li>\n                                                            <\/ul>\n                        <\/div>\n                    <\/div>\n\n                    <!-- FOOTER: SELECT label -->\n                    <div class=\"mt-4 flex items-center justify-between border-t border-white\/10 pt-3\">\n                        <span class=\"text-[10px] uppercase tracking-wider text-white\/35 seven-card-hint\">\u0645\u0627\u0630\u0627 \u064a\u0634\u0645\u0644<\/span>\n                        <span class=\"seven-select-label inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-200\/70\">\n                            <span class=\"seven-select-icon inline-flex h-5 w-5 items-center justify-center rounded-full border border-amber-200\/40 text-amber-200\">\n                                <svg class=\"seven-plus-icon\" width=\"10\" height=\"10\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 5v14M5 12h14\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><\/svg>\n                                <svg class=\"seven-check-icon hidden\" width=\"11\" height=\"11\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                            <\/span>\n                            <span class=\"seven-select-text\">\u0627\u062e\u062a\u0631<\/span>\n                        <\/span>\n                    <\/div>\n                <\/button>\n                                <button type=\"button\"\n                        class=\"seven-service-card group relative text-start rounded-[20px] border border-white\/10 bg-[#0c1827]\/80 p-5 transition duration-200\"\n                        data-service-id=\"website\"\n                        aria-pressed=\"false\">\n\n                    <!-- HEADER: icon + title + check -->\n                    <div class=\"flex items-start gap-3\">\n                        <div class=\"seven-service-icon flex h-11 w-11 flex-none items-center justify-center rounded-xl bg-white\/10 text-amber-100 transition\">\n                            <svg width=\"22\" height=\"22\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"\/><path d=\"M3 9h18M7 6.5h.01M10 6.5h.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\n                        <\/div>\n                        <div class=\"flex-1 min-w-0\">\n                            <h3 class=\"text-base font-semibold md:text-[17px] leading-tight text-white\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/h3>\n                            <div lang=\"en\" class=\"mt-1 text-[10px] uppercase tracking-[0.22em] text-amber-200\/55\" translate=\"no\">Website Maintenance<\/div>\n                        <\/div>\n                        <div class=\"seven-check hidden flex h-7 w-7 flex-none items-center justify-center rounded-full bg-amber-300 text-[#08111d] shadow-lg shadow-amber-500\/20\">\n                            <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                        <\/div>\n                    <\/div>\n\n                    <!-- PRICE row (always visible) -->\n                    <div class=\"mt-4 flex items-baseline gap-2\" translate=\"no\">\n                        <span class=\"text-[10px] uppercase tracking-wider text-white\/40\">\u0627\u0628\u062a\u062f\u0627\u0621\u064b \u0645\u0646<\/span>\n                        <span class=\"text-xl font-semibold text-white\">$900<\/span>\n                        <span class=\"text-[11px] text-white\/45\">\/ \u0645\u0634\u0631\u0648\u0639<\/span>\n                    <\/div>\n\n                    <!-- EXPANDABLE: description + features (hidden by default, shown on hover\/selected) -->\n                    <div class=\"seven-card-body overflow-hidden max-h-0 transition-all duration-300 ease-out\">\n                        <div class=\"pt-4 mt-4 border-t border-white\/10\">\n                            <p class=\"text-sm leading-6 text-white\/70\">\u0645\u0648\u0642\u0639 \u0627\u062d\u062a\u0631\u0627\u0641\u064a \u0645\u0635\u0645\u0645 \u0644\u064a\u0643\u0648\u0646 \u0646\u0642\u0637\u0629 \u062a\u062d\u0648\u064a\u0644\u060c \u0648\u0644\u064a\u0633 \u0645\u062c\u0631\u062f \u0648\u0627\u062c\u0647\u0629 \u0639\u0631\u0636.<\/p>\n                            <ul class=\"mt-3 grid gap-1.5\">\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>SEO \u0648\u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629 \u0644\u0644\u0638\u0647\u0648\u0631 \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0623\u0648\u0644\u0649<\/span>\n                                <\/li>\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u0631\u0641\u0639 \u062c\u0648\u062f\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/span>\n                                <\/li>\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u0631\u0641\u0639 \u0627\u0644\u0643\u0641\u0627\u0621\u0629 \u0648\u0627\u0644\u0633\u0631\u0639\u0629<\/span>\n                                <\/li>\n                                                            <\/ul>\n                        <\/div>\n                    <\/div>\n\n                    <!-- FOOTER: SELECT label -->\n                    <div class=\"mt-4 flex items-center justify-between border-t border-white\/10 pt-3\">\n                        <span class=\"text-[10px] uppercase tracking-wider text-white\/35 seven-card-hint\">\u0645\u0627\u0630\u0627 \u064a\u0634\u0645\u0644<\/span>\n                        <span class=\"seven-select-label inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-200\/70\">\n                            <span class=\"seven-select-icon inline-flex h-5 w-5 items-center justify-center rounded-full border border-amber-200\/40 text-amber-200\">\n                                <svg class=\"seven-plus-icon\" width=\"10\" height=\"10\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 5v14M5 12h14\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><\/svg>\n                                <svg class=\"seven-check-icon hidden\" width=\"11\" height=\"11\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                            <\/span>\n                            <span class=\"seven-select-text\">\u0627\u062e\u062a\u0631<\/span>\n                        <\/span>\n                    <\/div>\n                <\/button>\n                                <button type=\"button\"\n                        class=\"seven-service-card group relative text-start rounded-[20px] border border-white\/10 bg-[#0c1827]\/80 p-5 transition duration-200\"\n                        data-service-id=\"production\"\n                        aria-pressed=\"false\">\n\n                    <!-- HEADER: icon + title + check -->\n                    <div class=\"flex items-start gap-3\">\n                        <div class=\"seven-service-icon flex h-11 w-11 flex-none items-center justify-center rounded-xl bg-white\/10 text-amber-100 transition\">\n                            <svg width=\"22\" height=\"22\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"3\" y=\"7\" width=\"13\" height=\"10\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"\/><path d=\"m16 11 5-3v8l-5-3\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"\/><\/svg>\n                        <\/div>\n                        <div class=\"flex-1 min-w-0\">\n                            <h3 class=\"text-base font-semibold md:text-[17px] leading-tight text-white\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062a\u0635\u0648\u064a\u0631<\/h3>\n                            <div lang=\"en\" class=\"mt-1 text-[10px] uppercase tracking-[0.22em] text-amber-200\/55\" translate=\"no\">Production System<\/div>\n                        <\/div>\n                        <div class=\"seven-check hidden flex h-7 w-7 flex-none items-center justify-center rounded-full bg-amber-300 text-[#08111d] shadow-lg shadow-amber-500\/20\">\n                            <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                        <\/div>\n                    <\/div>\n\n                    <!-- PRICE row (always visible) -->\n                    <div class=\"mt-4 flex items-baseline gap-2\" translate=\"no\">\n                        <span class=\"text-[10px] uppercase tracking-wider text-white\/40\">\u0627\u0628\u062a\u062f\u0627\u0621\u064b \u0645\u0646<\/span>\n                        <span class=\"text-xl font-semibold text-white\">$1,200<\/span>\n                        <span class=\"text-[11px] text-white\/45\">\/ \u0645\u0634\u0631\u0648\u0639<\/span>\n                    <\/div>\n\n                    <!-- EXPANDABLE: description + features (hidden by default, shown on hover\/selected) -->\n                    <div class=\"seven-card-body overflow-hidden max-h-0 transition-all duration-300 ease-out\">\n                        <div class=\"pt-4 mt-4 border-t border-white\/10\">\n                            <p class=\"text-sm leading-6 text-white\/70\">\u0645\u062d\u062a\u0648\u0649 \u0628\u0635\u0631\u064a \u064a\u0639\u0643\u0633 \u062c\u0648\u062f\u0629 \u0645\u0634\u0631\u0648\u0639\u0643 \u0648\u064a\u0645\u0646\u062d \u0639\u0644\u0627\u0645\u062a\u0643 \u062d\u0636\u0648\u0631\u064b\u0627 \u0623\u0642\u0648\u0649 \u0648\u0623\u0643\u062b\u0631 \u062a\u0623\u062b\u064a\u0631\u064b\u0627.<\/p>\n                            <ul class=\"mt-3 grid gap-1.5\">\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u062a\u0648\u062c\u064a\u0647 \u0643\u0627\u062f\u0631 \u0627\u0644\u0645\u0635\u0648\u0631\u064a\u0646<\/span>\n                                <\/li>\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u0625\u0631\u0633\u0627\u0644 \u0646\u0645\u0627\u0630\u062c \u0648\u0623\u0641\u0643\u0627\u0631 \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u062a\u0637\u0628\u064a\u0642<\/span>\n                                <\/li>\n                                                            <\/ul>\n                        <\/div>\n                    <\/div>\n\n                    <!-- FOOTER: SELECT label -->\n                    <div class=\"mt-4 flex items-center justify-between border-t border-white\/10 pt-3\">\n                        <span class=\"text-[10px] uppercase tracking-wider text-white\/35 seven-card-hint\">\u0645\u0627\u0630\u0627 \u064a\u0634\u0645\u0644<\/span>\n                        <span class=\"seven-select-label inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-200\/70\">\n                            <span class=\"seven-select-icon inline-flex h-5 w-5 items-center justify-center rounded-full border border-amber-200\/40 text-amber-200\">\n                                <svg class=\"seven-plus-icon\" width=\"10\" height=\"10\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 5v14M5 12h14\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><\/svg>\n                                <svg class=\"seven-check-icon hidden\" width=\"11\" height=\"11\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                            <\/span>\n                            <span class=\"seven-select-text\">\u0627\u062e\u062a\u0631<\/span>\n                        <\/span>\n                    <\/div>\n                <\/button>\n                                <button type=\"button\"\n                        class=\"seven-service-card group relative text-start rounded-[20px] border border-white\/10 bg-[#0c1827]\/80 p-5 transition duration-200\"\n                        data-service-id=\"cro\"\n                        aria-pressed=\"false\">\n\n                    <!-- HEADER: icon + title + check -->\n                    <div class=\"flex items-start gap-3\">\n                        <div class=\"seven-service-icon flex h-11 w-11 flex-none items-center justify-center rounded-xl bg-white\/10 text-amber-100 transition\">\n                            <svg width=\"22\" height=\"22\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M3 17 9 11l4 4 8-8\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M15 5h6v6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                        <\/div>\n                        <div class=\"flex-1 min-w-0\">\n                            <h3 class=\"text-base font-semibold md:text-[17px] leading-tight text-white\">\u0645\u062a\u0627\u0628\u0639\u0629 \u0648\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a<\/h3>\n                            <div lang=\"en\" class=\"mt-1 text-[10px] uppercase tracking-[0.22em] text-amber-200\/55\" translate=\"no\">Growth System<\/div>\n                        <\/div>\n                        <div class=\"seven-check hidden flex h-7 w-7 flex-none items-center justify-center rounded-full bg-amber-300 text-[#08111d] shadow-lg shadow-amber-500\/20\">\n                            <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                        <\/div>\n                    <\/div>\n\n                    <!-- PRICE row (always visible) -->\n                    <div class=\"mt-4 flex items-baseline gap-2\" translate=\"no\">\n                        <span class=\"text-[10px] uppercase tracking-wider text-white\/40\">\u0627\u0628\u062a\u062f\u0627\u0621\u064b \u0645\u0646<\/span>\n                        <span class=\"text-xl font-semibold text-white\">$900<\/span>\n                        <span class=\"text-[11px] text-white\/45\">\/ \u0634\u0647\u0631\u064a\u064b\u0627<\/span>\n                    <\/div>\n\n                    <!-- EXPANDABLE: description + features (hidden by default, shown on hover\/selected) -->\n                    <div class=\"seven-card-body overflow-hidden max-h-0 transition-all duration-300 ease-out\">\n                        <div class=\"pt-4 mt-4 border-t border-white\/10\">\n                            <p class=\"text-sm leading-6 text-white\/70\">\u062a\u062d\u0644\u064a\u0644 \u0648\u062a\u062d\u0633\u064a\u0646 \u0631\u062d\u0644\u0629 \u0627\u0644\u0639\u0645\u064a\u0644 \u0644\u0631\u0641\u0639 \u0645\u0639\u062f\u0644\u0627\u062a \u0627\u0644\u062a\u062d\u0648\u064a\u0644 \u0648\u0631\u0628\u0637 \u0627\u0644\u062c\u0647\u0648\u062f \u0627\u0644\u062a\u0633\u0648\u064a\u0642\u064a\u0629 \u0628\u0627\u0644\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0641\u0639\u0644\u064a\u0629.<\/p>\n                            <ul class=\"mt-3 grid gap-1.5\">\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u0628\u0646\u0627\u0621 \u0647\u064a\u0643\u0644\u064a\u0629 \u0645\u0628\u064a\u0639\u0627\u062a \u0645\u062e\u0635\u0635\u0629<\/span>\n                                <\/li>\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u062a\u062d\u0644\u064a\u0644 \u0646\u062a\u0627\u0626\u062c \u0648\u062a\u062d\u0633\u064a\u0646 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a<\/span>\n                                <\/li>\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u0627\u0642\u062a\u0631\u0627\u062d \u0639\u0631\u0648\u0636 \u0634\u0647\u0631\u064a\u0629 (Combos \/ Offers)<\/span>\n                                <\/li>\n                                                                <li class=\"flex items-start gap-2 text-[12px] leading-5 text-white\/65\">\n                                    <span class=\"mt-1.5 h-1 w-1 flex-none rounded-full bg-amber-300\/70\"><\/span>\n                                    <span>\u0645\u062a\u0627\u0628\u0639\u0629 \u0647\u062f\u0641 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a \u0627\u0644\u0645\u0631\u0635\u0648\u062f<\/span>\n                                <\/li>\n                                                            <\/ul>\n                        <\/div>\n                    <\/div>\n\n                    <!-- FOOTER: SELECT label -->\n                    <div class=\"mt-4 flex items-center justify-between border-t border-white\/10 pt-3\">\n                        <span class=\"text-[10px] uppercase tracking-wider text-white\/35 seven-card-hint\">\u0645\u0627\u0630\u0627 \u064a\u0634\u0645\u0644<\/span>\n                        <span class=\"seven-select-label inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-200\/70\">\n                            <span class=\"seven-select-icon inline-flex h-5 w-5 items-center justify-center rounded-full border border-amber-200\/40 text-amber-200\">\n                                <svg class=\"seven-plus-icon\" width=\"10\" height=\"10\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 5v14M5 12h14\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><\/svg>\n                                <svg class=\"seven-check-icon hidden\" width=\"11\" height=\"11\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                            <\/span>\n                            <span class=\"seven-select-text\">\u0627\u062e\u062a\u0631<\/span>\n                        <\/span>\n                    <\/div>\n                <\/button>\n                            <\/div>\n        <\/section>\n\n        <!-- STICKY COUNTER (floats when services are selected) -->\n        <div class=\"seven-counter-bar hidden fixed bottom-6 left-1\/2 -translate-x-1\/2 z-40 items-center gap-4 rounded-full border border-white\/15 bg-[#0c1827]\/95 backdrop-blur-xl px-4 py-3 shadow-2xl shadow-black\/40\">\n            <div class=\"flex items-center gap-2\">\n                <span class=\"seven-counter-number flex h-8 w-8 items-center justify-center rounded-full bg-amber-300 text-[#08111d] text-sm font-bold\" translate=\"no\">0<\/span>\n                <span class=\"text-xs md:text-sm text-white\/80\">\u0627\u0644\u0645\u062e\u062a\u0627\u0631<\/span>\n            <\/div>\n            <div class=\"h-6 w-px bg-white\/15\"><\/div>\n            <div class=\"flex items-baseline gap-1 text-sm font-semibold\" translate=\"no\">\n                <span class=\"seven-counter-total\">$0<\/span>\n            <\/div>\n            <a href=\"#offer\" class=\"ms-2 rounded-full bg-white px-4 py-2 text-xs md:text-sm font-semibold text-[#08111d] transition hover:opacity-90\">\n                \u0639\u0631\u0636 \u0627\u0644\u0639\u0631\u0636            <\/a>\n        <\/div>\n\n        <!-- SEVEN IMPACT TOGGLE -->\n        <section class=\"mt-16 rounded-[32px] border border-amber-200\/20 bg-gradient-to-br from-amber-500\/[0.08] to-transparent p-6 md:p-8\">\n            <div class=\"grid gap-6 md:grid-cols-[1fr_auto] md:items-center\">\n                <div>\n                    <div class=\"text-xs uppercase tracking-[0.3em] text-amber-200\/70\">Seven Impact<\/div>\n                    <h3 class=\"mt-3 text-2xl font-semibold md:text-3xl\">Seven Impact<\/h3>\n                    <p class=\"mt-3 max-w-2xl text-sm leading-7 text-white\/75 md:text-base\">\u0639\u0646\u062f\u0645\u0627 \u062a\u062e\u062a\u0627\u0631 \u0623\u0646 \u062a\u0643\u0648\u0646 \u062c\u0632\u0621\u064b\u0627 \u0645\u0646 Seven Impact\u060c \u0641\u0623\u0646\u062a \u0644\u0627 \u062a\u0633\u062a\u062b\u0645\u0631 \u0641\u0642\u0637 \u0641\u064a \u0646\u0645\u0648 \u0645\u0634\u0631\u0648\u0639\u0643\u060c \u0628\u0644 \u062a\u0633\u0627\u0647\u0645 \u0641\u064a \u0645\u0633\u0627\u0631 \u0623\u0648\u0633\u0639 \u064a\u0635\u0646\u0639 \u0623\u062b\u0631\u064b\u0627 \u062d\u0642\u064a\u0642\u064a\u064b\u0627. \u0643\u0645\u0627 \u062a\u062d\u0635\u0644 \u0639\u0644\u0649 \u0645\u0632\u0627\u064a\u0627 \u0625\u0636\u0627\u0641\u064a\u0629 \u0636\u0645\u0646 \u0639\u0631\u0636\u0643 \u0627\u0644\u0645\u0628\u062f\u0626\u064a.<\/p>\n\n                    <!-- Reward line: gift-style, framed as a thank-you not an incentive -->\n                    <div class=\"mt-5 inline-flex items-start gap-3 rounded-2xl border border-amber-200\/25 bg-amber-100\/5 px-4 py-3 max-w-2xl\">\n                        <div class=\"flex h-8 w-8 flex-none items-center justify-center rounded-full bg-amber-300\/20 text-amber-200\">\n                            <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M20 12v10H4V12\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M2 7h20v5H2z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/><path d=\"M12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/><\/svg>\n                        <\/div>\n                        <div>\n                            <div class=\"text-[10px] uppercase tracking-[0.22em] text-amber-200\/70 mb-1\">\u0634\u0643\u0631\u064b\u0627 \u0644\u0645\u0633\u0627\u0647\u0645\u062a\u0643<\/div>\n                            <p class=\"text-sm leading-6 text-white\/85\">\u062a\u0642\u062f\u064a\u0631\u064b\u0627 \u0645\u0646\u0627 \u0644\u0627\u062e\u062a\u064a\u0627\u0631\u0643 \u0647\u0630\u0627 \u0627\u0644\u0645\u0633\u0627\u0631\u060c \u064a\u064f\u0637\u0628\u064e\u0651\u0642 <strong>\u062e\u0635\u0645 \u0625\u0636\u0627\u0641\u064a 25%<\/strong> \u0639\u0644\u0649 \u0639\u0631\u0636\u0643.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div>\n                    <button type=\"button\"\n                            id=\"seven-impact-toggle\"\n                            class=\"seven-impact-btn inline-flex items-center gap-3 rounded-full border border-amber-200\/30 bg-amber-100\/10 px-6 py-3.5 text-sm font-semibold text-amber-100 transition hover:bg-amber-100\/15\"\n                            aria-pressed=\"false\">\n                        <span class=\"seven-impact-icon flex h-6 w-6 items-center justify-center rounded-full border border-amber-200\/40 bg-transparent transition\">\n                            <svg class=\"hidden h-3.5 w-3.5\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                        <\/span>\n                        <span class=\"seven-impact-label\">\u062a\u0641\u0639\u064a\u0644 Seven Impact<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- OFFER SUMMARY -->\n        <section id=\"offer\" class=\"mt-20\">\n            <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n                <div>\n                    <div class=\"text-xs uppercase tracking-[0.3em] text-white\/40\">\u0639\u0631\u0636\u0643<\/div>\n                    <h2 class=\"mt-3 text-3xl font-semibold leading-[1.25] md:text-5xl md:leading-[1.2]\">\n                        <span class=\"seven-highlight\">\u0639\u0631\u0636\u0643 \u0627\u0644\u0645\u0628\u062f\u0626\u064a<\/span>\n                    <\/h2>\n                <\/div>\n                <p class=\"max-w-xl text-sm leading-7 text-white\/60 md:text-base\">\u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u062e\u062a\u064a\u0627\u0631\u0627\u062a\u0643\u060c \u0646\u0642\u062f\u0645 \u0644\u0643 \u062a\u0635\u0648\u0631\u064b\u0627 \u0645\u0628\u062f\u0626\u064a\u064b\u0627 \u0648\u0627\u0636\u062d\u064b\u0627 \u064a\u0633\u0627\u0639\u062f\u0643 \u0639\u0644\u0649 \u0627\u062a\u062e\u0627\u0630 \u0627\u0644\u0642\u0631\u0627\u0631 \u0628\u062b\u0642\u0629.<\/p>\n            <\/div>\n\n            <div class=\"mt-8 grid gap-6 lg:grid-cols-[0.85fr_1.15fr] lg:items-start\">\n                <!-- Feature bullets -->\n                <div class=\"rounded-[28px] border border-white\/10 bg-[#0c1827]\/60 p-6 md:p-8\">\n                    <ul class=\"grid gap-4\">\n                        <li class=\"flex items-start gap-3 text-sm leading-7 text-white\/80 md:text-base\">\n                            <span class=\"mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full bg-amber-300\/20 text-amber-200\">\n                                <svg width=\"11\" height=\"11\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                            <\/span>\n                            <span>\u0639\u0631\u0636 \u0645\u062e\u0635\u0635 \u062d\u0633\u0628 \u0627\u062d\u062a\u064a\u0627\u062c\u0643<\/span>\n                        <\/li>\n                        <li class=\"flex items-start gap-3 text-sm leading-7 text-white\/80 md:text-base\">\n                            <span class=\"mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full bg-amber-300\/20 text-amber-200\">\n                                <svg width=\"11\" height=\"11\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                            <\/span>\n                            <span>\u062e\u0635\u0648\u0645\u0627\u062a \u062a\u0644\u0642\u0627\u0626\u064a\u0629 \u0639\u0646\u062f \u062f\u0645\u062c \u0627\u0644\u062e\u062f\u0645\u0627\u062a<\/span>\n                        <\/li>\n                        <li class=\"flex items-start gap-3 text-sm leading-7 text-white\/80 md:text-base\">\n                            <span class=\"mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full bg-amber-300\/20 text-amber-200\">\n                                <svg width=\"11\" height=\"11\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                            <\/span>\n                            <span>\u0648\u0636\u0648\u062d \u0641\u064a \u0627\u0644\u0642\u064a\u0645\u0629 \u0642\u0628\u0644 \u0627\u0644\u0628\u062f\u0621<\/span>\n                        <\/li>\n                    <\/ul>\n                <\/div>\n\n                <!-- Live summary -->\n                <div class=\"seven-summary rounded-[32px] border border-white\/10 bg-gradient-to-br from-[#0d1a2a] to-[#101f30] p-6 md:p-8\">\n                    <div class=\"flex items-center justify-between border-b border-white\/10 pb-4\">\n                        <div class=\"text-xs uppercase tracking-[0.3em] text-white\/45\">\u0627\u062e\u062a\u064a\u0627\u0631\u0627\u062a\u0643<\/div>\n                        <div class=\"seven-impact-badge hidden rounded-full border border-amber-300\/30 bg-amber-100\/10 px-3 py-1 text-xs text-amber-100\" translate=\"no\">\n                            \u062a\u0645 \u062a\u0641\u0639\u064a\u0644 Seven Impact                        <\/div>\n                    <\/div>\n\n                    <!-- Impact welcome banner (shown when Impact is active) -->\n                    <div class=\"seven-impact-welcome hidden mt-5 rounded-[22px] border border-amber-200\/30 bg-gradient-to-br from-amber-500\/[0.15] via-amber-500\/[0.08] to-transparent p-5\">\n                        <div class=\"flex items-start gap-3\">\n                            <div class=\"flex h-10 w-10 flex-none items-center justify-center rounded-full bg-amber-300\/25 text-amber-200\">\n                                <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 21s-8-5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6-8 11-8 11h-2Z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/><\/svg>\n                            <\/div>\n                            <div class=\"flex-1\">\n                                <div class=\"text-sm font-semibold text-amber-100 md:text-base\">\u0623\u0647\u0644\u064b\u0627 \u0628\u0643 \u0641\u064a Seven Impact \ud83c\udf31<\/div>\n                                <p class=\"mt-2 text-sm leading-6 text-white\/75\">\u0634\u0643\u0631\u064b\u0627 \u0644\u0627\u0646\u0636\u0645\u0627\u0645\u0643 \u0625\u0644\u0649 \u0645\u0633\u0627\u0631 \u064a\u0635\u0646\u0639 \u0623\u062b\u0631\u064b\u0627 \u0625\u0646\u0633\u0627\u0646\u064a\u064b\u0627 \u062d\u0642\u064a\u0642\u064a\u064b\u0627. \u0639\u0631\u0636\u0643 \u0627\u0644\u0645\u0628\u062f\u0626\u064a \u064a\u062a\u0636\u0645\u0651\u0646 \u0627\u0644\u0622\u0646 \u0645\u0632\u0627\u064a\u0627 \u0625\u0636\u0627\u0641\u064a\u0629 \u0645\u0646 Seven Impact \u2014 \u0648\u062c\u0632\u0621 \u0645\u0646 \u0645\u0634\u0631\u0648\u0639\u0643 \u0633\u064a\u062f\u0639\u0645 \u0645\u0628\u0627\u062f\u0631\u0627\u062a \u0625\u0646\u0633\u0627\u0646\u064a\u0629 \u0645\u0648\u062b\u0648\u0642\u0629 \u0645\u0639 \u0634\u0631\u0643\u0627\u0626\u0646\u0627 \u0627\u0644\u0645\u064a\u062f\u0627\u0646\u064a\u064a\u0646.<\/p>\n                                <ul class=\"mt-3 grid gap-1.5\">\n                                    <li class=\"flex items-start gap-2 text-xs leading-5 text-white\/75\">\n                                        <span class=\"mt-0.5 flex h-4 w-4 flex-none items-center justify-center rounded-full bg-amber-300 text-[#08111d]\"><svg width=\"9\" height=\"9\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n                                        <span>\u062c\u0632\u0621 \u0645\u0646 \u0645\u0634\u0631\u0648\u0639\u0643 \u064a\u062f\u0639\u0645 \u0645\u0628\u0627\u062f\u0631\u0627\u062a \u0625\u0646\u0633\u0627\u0646\u064a\u0629<\/span>\n                                    <\/li>\n                                    <li class=\"flex items-start gap-2 text-xs leading-5 text-white\/75\">\n                                        <span class=\"mt-0.5 flex h-4 w-4 flex-none items-center justify-center rounded-full bg-amber-300 text-[#08111d]\"><svg width=\"9\" height=\"9\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n                                        <span>\u0623\u0648\u0644\u0648\u064a\u0629 \u0641\u064a \u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0634\u0631\u0643\u0627\u0621 \u0627\u0644\u062a\u0646\u0641\u064a\u0630<\/span>\n                                    <\/li>\n                                    <li class=\"flex items-start gap-2 text-xs leading-5 text-white\/75\">\n                                        <span class=\"mt-0.5 flex h-4 w-4 flex-none items-center justify-center rounded-full bg-amber-300 text-[#08111d]\"><svg width=\"9\" height=\"9\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m5 13 4 4L19 7\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n                                        <span>\u062a\u0642\u0631\u064a\u0631 \u0634\u0641\u0627\u0641 \u0639\u0646 \u0627\u0644\u0623\u062b\u0631 \u0645\u0631\u0641\u0642 \u0645\u0639 \u0627\u0644\u0639\u0631\u0636<\/span>\n                                    <\/li>\n                                <\/ul>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Empty state -->\n                    <p class=\"seven-summary-empty mt-6 text-sm leading-7 text-white\/55\">\u0644\u0645 \u062a\u062e\u062a\u0631 \u0623\u064a \u062e\u062f\u0645\u0629 \u0628\u0639\u062f. \u0627\u062e\u062a\u0631 \u0645\u0633\u0627\u0631\u064b\u0627 \u0623\u0648 \u0623\u0643\u062b\u0631 \u0645\u0646 \u0627\u0644\u0623\u0639\u0644\u0649 \u0644\u0645\u0634\u0627\u0647\u062f\u0629 \u0639\u0631\u0636\u0643.<\/p>\n\n                    <!-- Line items (populated by JS) -->\n                    <ul class=\"seven-summary-items mt-5 hidden grid gap-3\"><\/ul>\n\n                    <!-- Totals (populated by JS) -->\n                    <div class=\"seven-summary-totals mt-6 hidden border-t border-white\/10 pt-5 grid gap-2 text-sm\">\n                        <div class=\"flex items-center justify-between text-white\/65\">\n                            <span>\u0627\u0644\u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u0641\u0631\u0639\u064a<\/span>\n                            <span class=\"seven-subtotal\" translate=\"no\">\u2014<\/span>\n                        <\/div>\n                        <div class=\"seven-discount-combo-row hidden flex items-center justify-between text-amber-200\">\n                            <span>\u062e\u0635\u0645 \u0627\u0644\u062f\u0645\u062c <span class=\"seven-combo-pct\" translate=\"no\"><\/span><\/span>\n                            <span class=\"seven-combo-amount\" translate=\"no\">\u2014<\/span>\n                        <\/div>\n                        <div class=\"seven-discount-impact-row hidden flex items-center justify-between text-emerald-300\">\n                            <span>\ud83c\udf31 \u0645\u0643\u0627\u0641\u0623\u0629 Seven Impact <span class=\"seven-impact-pct\" translate=\"no\"><\/span><\/span>\n                            <span class=\"seven-impact-amount\" translate=\"no\">\u2014<\/span>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"seven-summary-final mt-5 hidden rounded-2xl border border-amber-200\/20 bg-amber-100\/5 p-5\">\n                        <div class=\"flex items-baseline justify-between gap-3\">\n                            <div class=\"text-sm text-white\/60\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0645\u0628\u062f\u0626\u064a<\/div>\n                            <div class=\"text-3xl font-semibold md:text-4xl seven-final-price\" translate=\"no\">\u2014<\/div>\n                        <\/div>\n                        <div class=\"seven-final-breakdown mt-2 text-xs text-white\/55 text-end\" translate=\"no\"><\/div>\n                        <div class=\"mt-4 pt-4 border-t border-amber-200\/15 flex items-start gap-2\">\n                            <span class=\"mt-0.5 flex h-4 w-4 flex-none items-center justify-center rounded-full bg-amber-300\/25 text-amber-200\">\n                                <svg width=\"9\" height=\"9\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 8v5l3 3\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"\/><\/svg>\n                            <\/span>\n                            <span class=\"text-xs leading-5 text-amber-100\/80\">\u0634\u0647\u0631 \u0648\u0627\u062d\u062f \u0645\u0642\u062f\u0645\u064b\u0627 \u0639\u0646\u062f \u0628\u062f\u0621 \u0627\u0644\u0639\u0645\u0644<\/span>\n                        <\/div>\n                    <\/div>\n\n                    <p class=\"seven-summary-note mt-4 hidden text-xs leading-6 text-white\/45\">* \u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0646\u0647\u0627\u0626\u064a \u064a\u064f\u062d\u062f\u064e\u0651\u062f \u0628\u0639\u062f \u0645\u0643\u0627\u0644\u0645\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629 \u0642\u0635\u064a\u0631\u0629 \u0645\u062e\u0635\u0635\u0629 \u0644\u0645\u0634\u0631\u0648\u0639\u0643.<\/p>\n\n                    <!-- Client info form (required before CTAs) -->\n                    <div class=\"seven-client-form mt-6 hidden rounded-2xl border border-white\/10 bg-white\/[0.03] p-5\">\n                        <div class=\"text-sm font-semibold text-white\/90\">\u0642\u0628\u0644 \u0625\u0631\u0633\u0627\u0644 \u0639\u0631\u0636\u0643<\/div>\n                        <p class=\"mt-1 text-xs leading-6 text-white\/55\">\u0646\u0639\u0645\u0644 \u0645\u0639 \u0643\u0644 \u0645\u0634\u0631\u0648\u0639 \u0628\u0639\u0646\u0627\u064a\u0629 \u0644\u0636\u0645\u0627\u0646 \u0627\u0646\u0633\u062c\u0627\u0645 \u062d\u0642\u064a\u0642\u064a \u0645\u0639 \u0642\u064a\u0645\u0646\u0627. \u062a\u0639\u0631\u064a\u0641 \u0628\u0633\u064a\u0637 \u064a\u0633\u0627\u0639\u062f\u0646\u0627 \u0639\u0644\u0649 \u062a\u062d\u0636\u064a\u0631 \u0627\u0644\u0639\u0631\u0636 \u0627\u0644\u0645\u0646\u0627\u0633\u0628 \u0644\u0643.<\/p>\n                        <div class=\"mt-4 grid gap-3 sm:grid-cols-2\">\n                            <label class=\"block\">\n                                <span class=\"block text-xs text-white\/60 mb-1.5\">\u0627\u0633\u0645\u0643 \u0627\u0644\u0643\u0627\u0645\u0644<\/span>\n                                <input type=\"text\"\n                                       id=\"seven-client-name\"\n                                       class=\"w-full rounded-xl border border-white\/10 bg-[#0c1827] px-4 py-2.5 text-sm text-white placeholder:text-white\/30 focus:border-amber-300\/50 focus:outline-none focus:ring-2 focus:ring-amber-300\/20\"\n                                       placeholder=\"\u0645\u062b\u0644\u0627\u064b: \u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u062d\u0645\u062f\"\n                                       autocomplete=\"name\" \/>\n                            <\/label>\n                            <label class=\"block\">\n                                <span class=\"block text-xs text-white\/60 mb-1.5\">\u0645\u0634\u0631\u0648\u0639\u0643 \/ \u0639\u0644\u0627\u0645\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629<\/span>\n                                <input type=\"text\"\n                                       id=\"seven-client-project\"\n                                       class=\"w-full rounded-xl border border-white\/10 bg-[#0c1827] px-4 py-2.5 text-sm text-white placeholder:text-white\/30 focus:border-amber-300\/50 focus:outline-none focus:ring-2 focus:ring-amber-300\/20\"\n                                       placeholder=\"\u0645\u062b\u0644\u0627\u064b: Maison d&#039;Anavins \u2014 \u0639\u0637\u0648\u0631 \u0641\u0627\u062e\u0631\u0629\"\n                                       autocomplete=\"organization\" \/>\n                            <\/label>\n                        <\/div>\n                        <p class=\"seven-form-error hidden mt-3 text-xs text-red-300\">\u064a\u0631\u062c\u0649 \u062a\u0639\u0628\u0626\u0629 \u0627\u0644\u0627\u0633\u0645 \u0648\u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0642\u0628\u0644 \u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629.<\/p>\n                    <\/div>\n\n                    <!-- CTAs -->\n                    <div class=\"seven-summary-ctas mt-6 hidden flex flex-wrap gap-3\">\n                        <a href=\"#\" id=\"seven-wa-cta\" target=\"_blank\" rel=\"noopener\" class=\"inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-semibold text-[#08111d] transition hover:opacity-90\">\n                            <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z\"\/><\/svg>\n                            <span>\u0627\u0637\u0644\u0628 \u0647\u0630\u0627 \u0627\u0644\u0639\u0631\u0636 \u0639\u0628\u0631 \u0648\u0627\u062a\u0633\u0627\u0628<\/span>\n                        <\/a>\n                        <a href=\"https:\/\/api.whatsapp.com\/send\/?phone=905432261705&#038;text=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%D8%8C+%D8%A3%D8%B1%D9%8A%D8%AF+%D8%AD%D8%AC%D8%B2+%D9%85%D9%83%D8%A7%D9%84%D9%85%D8%A9+%D8%AA%D8%A3%D9%83%D9%8A%D8%AF+%D9%84%D9%84%D8%B9%D8%B1%D8%B6&#038;type=phone_number&#038;app_absent=0\" target=\"_blank\" rel=\"noopener\" class=\"rounded-full border border-white\/15 bg-white\/5 px-5 py-3 text-sm font-semibold text-white transition hover:bg-white\/10\">\u0627\u062d\u062c\u0632 \u0645\u0643\u0627\u0644\u0645\u0629 \u062a\u0623\u0643\u064a\u062f<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- COLLABORATION MODEL (from the PDF) -->\n        <section id=\"collab\" class=\"mt-20\">\n            <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n                <div>\n                    <div class=\"text-xs uppercase tracking-[0.3em] text-white\/40\">\u0646\u0645\u0648\u0630\u062c \u0627\u0644\u062a\u0639\u0627\u0648\u0646<\/div>\n                    <h2 class=\"mt-3 text-3xl font-semibold leading-[1.25] md:text-5xl md:leading-[1.2]\">\u0646\u0645\u0648\u0630\u062c \u0627\u0644\u062a\u0639\u0627\u0648\u0646<\/h2>\n                <\/div>\n                <p class=\"max-w-xl text-sm leading-7 text-white\/60 md:text-base\">\u0645\u0628\u0646\u064a\u0651 \u0639\u0644\u0649 \u0634\u0631\u0627\u0643\u0629 \u062d\u0642\u064a\u0642\u064a\u0629 \u2014 \u0648\u0627\u0636\u062d\u0629\u060c \u0648\u0645\u0646\u0638\u0645\u0629\u060c \u0648\u0645\u062d\u062a\u0631\u0645\u0629 \u0644\u0648\u0642\u062a\u0643.<\/p>\n            <\/div>\n\n            <div class=\"mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n                <!-- Card 1: payment upfront -->\n                <div class=\"rounded-[22px] border border-amber-200\/25 bg-gradient-to-br from-amber-500\/[0.08] to-transparent p-5\">\n                    <div class=\"flex h-10 w-10 items-center justify-center rounded-xl bg-amber-300\/20 text-amber-200\">\n                        <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"2\" y=\"6\" width=\"20\" height=\"13\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><path d=\"M2 11h20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><path d=\"M6 15h3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\n                    <\/div>\n                    <h3 class=\"mt-4 text-base font-semibold md:text-lg\">\u0634\u0647\u0631 \u0648\u0627\u062d\u062f \u0645\u0642\u062f\u0645\u064b\u0627<\/h3>\n                    <p class=\"mt-2 text-sm leading-6 text-white\/70\">\u064a\u062a\u0645 \u062f\u0641\u0639 \u0631\u0633\u0648\u0645 \u0634\u0647\u0631 \u0648\u0627\u062d\u062f \u0645\u0642\u062f\u0645\u064b\u0627 \u0639\u0646\u062f \u0628\u062f\u0621 \u0627\u0644\u0639\u0645\u0644\u060c \u0648\u0628\u0639\u062f\u0647\u0627 \u064a\u062a\u0645 \u0627\u0644\u062f\u0641\u0639 \u0628\u0634\u0643\u0644 \u0634\u0647\u0631\u064a \u0641\u064a \u0628\u062f\u0627\u064a\u0629 \u0643\u0644 \u0634\u0647\u0631 \u0637\u0648\u0627\u0644 \u0645\u062f\u0629 \u0627\u0644\u0639\u0642\u062f.<\/p>\n                <\/div>\n\n                <!-- Card 2: WhatsApp group -->\n                <div class=\"rounded-[22px] border border-white\/10 bg-[#0c1827]\/80 p-5\">\n                    <div class=\"flex h-10 w-10 items-center justify-center rounded-xl bg-white\/10 text-amber-100\">\n                        <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M17 17a5 5 0 0 0-10 0\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><circle cx=\"12\" cy=\"8\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><circle cx=\"5\" cy=\"11\" r=\"2\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><circle cx=\"19\" cy=\"11\" r=\"2\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><\/svg>\n                    <\/div>\n                    <h3 class=\"mt-4 text-base font-semibold md:text-lg\">\u0645\u062c\u0645\u0648\u0639\u0629 WhatsApp \u0645\u062e\u0635\u0635\u0629<\/h3>\n                    <p class=\"mt-2 text-sm leading-6 text-white\/70\">\u064a\u062a\u0645 \u0625\u0646\u0634\u0627\u0621 \u0645\u062c\u0645\u0648\u0639\u0629 WhatsApp \u062e\u0627\u0635\u0629 \u0628\u0645\u0634\u0631\u0648\u0639\u0643 \u062a\u0636\u0645 Account Manager \u0648\u0641\u0631\u064a\u0642 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0648\u0627\u0644\u0645\u062d\u062a\u0648\u0649\u060c \u0644\u0636\u0645\u0627\u0646 \u0627\u0644\u062a\u0646\u0633\u064a\u0642 \u0648\u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0627\u0644\u064a\u0648\u0645\u064a\u0629 \u0628\u0634\u0643\u0644 \u0633\u0631\u064a\u0639 \u0648\u0645\u0646\u0638\u0645 \u0648\u0628\u0623\u0639\u0644\u0649 \u062c\u0648\u062f\u0629.<\/p>\n                <\/div>\n\n                <!-- Card 3: 3-month minimum -->\n                <div class=\"rounded-[22px] border border-white\/10 bg-[#0c1827]\/80 p-5\">\n                    <div class=\"flex h-10 w-10 items-center justify-center rounded-xl bg-white\/10 text-amber-100\">\n                        <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><path d=\"M3 10h18M8 3v4M16 3v4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\n                    <\/div>\n                    <h3 class=\"mt-4 text-base font-semibold md:text-lg\">3 \u0623\u0634\u0647\u0631 \u0643\u062d\u062f \u0623\u062f\u0646\u0649<\/h3>\n                    <p class=\"mt-2 text-sm leading-6 text-white\/70\">\u0646\u0648\u0635\u064a \u0628\u0641\u062a\u0631\u0629 \u0639\u0645\u0644 \u0644\u0627 \u062a\u0642\u0644 \u0639\u0646 3 \u0623\u0634\u0647\u0631\u060c \u0644\u0636\u0645\u0627\u0646 \u0628\u0646\u0627\u0621 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0648\u0627\u0636\u062d\u0629 \u0648\u062a\u062d\u0642\u064a\u0642 \u0646\u062a\u0627\u0626\u062c \u0641\u0639\u0644\u064a\u0629 \u0648\u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0642\u064a\u0627\u0633. \u062e\u0644\u0627\u0644 \u0647\u0630\u0647 \u0627\u0644\u0641\u062a\u0631\u0629 \u064a\u062a\u0645 \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u062d\u0645\u0644\u0627\u062a \u0648\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u062f\u0627\u0621 \u0628\u0634\u0643\u0644 \u0645\u0633\u062a\u0645\u0631 \u0644\u0644\u0648\u0635\u0648\u0644 \u0644\u0623\u0641\u0636\u0644 \u0639\u0627\u0626\u062f \u0645\u0645\u0643\u0646.<\/p>\n                <\/div>\n\n                <!-- Card 4: stop anytime -->\n                <div class=\"rounded-[22px] border border-white\/10 bg-[#0c1827]\/80 p-5\">\n                    <div class=\"flex h-10 w-10 items-center justify-center rounded-xl bg-white\/10 text-amber-100\">\n                        <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><path d=\"M9 9h6v6H9z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>\n                    <\/div>\n                    <h3 class=\"mt-4 text-base font-semibold md:text-lg\">\u0625\u0645\u0643\u0627\u0646\u064a\u0629 \u0627\u0644\u0625\u064a\u0642\u0627\u0641 \u0628\u0625\u0634\u0639\u0627\u0631 \u0645\u0633\u0628\u0642<\/h3>\n                    <p class=\"mt-2 text-sm leading-6 text-white\/70\">\u064a\u0645\u0643\u0646 \u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0641\u064a \u0623\u064a \u0648\u0642\u062a \u0645\u0639 \u0625\u0634\u0639\u0627\u0631 \u0645\u0633\u0628\u0642 \u0642\u0628\u0644 \u0634\u0647\u0631\u060c \u0644\u0636\u0645\u0627\u0646 \u062a\u0646\u0638\u064a\u0645 \u0648\u062a\u0633\u0644\u064a\u0645 \u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0628\u0634\u0643\u0644 \u0627\u062d\u062a\u0631\u0627\u0641\u064a.<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n    <\/main>\n<\/div>\n<\/div>\n\n<!-- ===========================================================\n     Live pricing logic.\n     =========================================================== -->\n<script>\n(function() {\n    var data = {\"services\":[{\"id\":\"social\",\"title\":\"\\u0625\\u062f\\u0627\\u0631\\u0629 \\u0627\\u0644\\u0633\\u0648\\u0634\\u064a\\u0627\\u0644 \\u0645\\u064a\\u062f\\u064a\\u0627\",\"price\":800,\"billing\":\"monthly\"},{\"id\":\"ads\",\"title\":\"\\u0625\\u062f\\u0627\\u0631\\u0629 \\u0627\\u0644\\u062d\\u0645\\u0644\\u0627\\u062a \\u0627\\u0644\\u0625\\u0639\\u0644\\u0627\\u0646\\u064a\\u0629\",\"price\":600,\"billing\":\"monthly\"},{\"id\":\"website\",\"title\":\"\\u0625\\u062f\\u0627\\u0631\\u0629 \\u0627\\u0644\\u0645\\u0648\\u0642\\u0639 \\u0627\\u0644\\u0625\\u0644\\u0643\\u062a\\u0631\\u0648\\u0646\\u064a\",\"price\":900,\"billing\":\"project\"},{\"id\":\"production\",\"title\":\"\\u0625\\u062f\\u0627\\u0631\\u0629 \\u0627\\u0644\\u062a\\u0635\\u0648\\u064a\\u0631\",\"price\":1200,\"billing\":\"project\"},{\"id\":\"cro\",\"title\":\"\\u0645\\u062a\\u0627\\u0628\\u0639\\u0629 \\u0648\\u062a\\u062d\\u0633\\u064a\\u0646 \\u0627\\u0644\\u0645\\u0628\\u064a\\u0639\\u0627\\u062a\",\"price\":900,\"billing\":\"monthly\"}],\"discounts\":{\"2\":10,\"3\":15,\"4\":20},\"t\":{\"per_month\":\"\\\/ \\u0634\\u0647\\u0631\\u064a\\u064b\\u0627\",\"per_project\":\"\\\/ \\u0645\\u0634\\u0631\\u0648\\u0639\",\"starting_from\":\"\\u0627\\u0628\\u062a\\u062f\\u0627\\u0621\\u064b \\u0645\\u0646\",\"subtotal\":\"\\u0627\\u0644\\u0645\\u062c\\u0645\\u0648\\u0639 \\u0627\\u0644\\u0641\\u0631\\u0639\\u064a\",\"discount\":\"\\u062e\\u0635\\u0645 \\u0627\\u0644\\u062f\\u0645\\u062c\",\"final_price\":\"\\u0627\\u0644\\u0633\\u0639\\u0631 \\u0627\\u0644\\u0645\\u0628\\u062f\\u0626\\u064a\",\"monthly_recurring\":\"\\u0634\\u0647\\u0631\\u064a \\u0645\\u0633\\u062a\\u0645\\u0631\",\"one_time\":\"\\u062f\\u0641\\u0639\\u0629 \\u0648\\u0627\\u062d\\u062f\\u0629\",\"summary_empty\":\"\\u0644\\u0645 \\u062a\\u062e\\u062a\\u0631 \\u0623\\u064a \\u062e\\u062f\\u0645\\u0629 \\u0628\\u0639\\u062f. \\u0627\\u062e\\u062a\\u0631 \\u0645\\u0633\\u0627\\u0631\\u064b\\u0627 \\u0623\\u0648 \\u0623\\u0643\\u062b\\u0631 \\u0645\\u0646 \\u0627\\u0644\\u0623\\u0639\\u0644\\u0649 \\u0644\\u0645\\u0634\\u0627\\u0647\\u062f\\u0629 \\u0639\\u0631\\u0636\\u0643.\",\"impact_benefit\":\"\\u064a\\u0634\\u0645\\u0644 \\u0645\\u0632\\u0627\\u064a\\u0627 Seven Impact\",\"form_required\":\"\\u064a\\u0631\\u062c\\u0649 \\u062a\\u0639\\u0628\\u0626\\u0629 \\u0627\\u0644\\u0627\\u0633\\u0645 \\u0648\\u0627\\u0644\\u0645\\u0634\\u0631\\u0648\\u0639 \\u0642\\u0628\\u0644 \\u0627\\u0644\\u0645\\u062a\\u0627\\u0628\\u0639\\u0629.\",\"builder_h0\":\"\\u0627\\u062e\\u062a\\u0631. \\u0627\\u062f\\u0645\\u062c. \\u0634\\u0627\\u0647\\u062f \\u0639\\u0631\\u0636\\u0643.\",\"builder_h1\":\"\\u0627\\u062e\\u062a\\u0631\\u062a \\u062e\\u062f\\u0645\\u0629 \\u0648\\u0627\\u062d\\u062f\\u0629 \\u2014 \\u0627\\u0633\\u062a\\u0645\\u0631\",\"builder_hn\":\"\\u0627\\u062e\\u062a\\u0631\\u062a {n} \\u062e\\u062f\\u0645\\u0627\\u062a \\u2014 \\u0627\\u0646\\u0632\\u0644 \\u0644\\u0644\\u0623\\u0633\\u0641\\u0644 \\u0644\\u0645\\u0631\\u0627\\u062c\\u0639\\u0629 \\u0627\\u0644\\u0639\\u0631\\u0636\",\"counter_label\":\"\\u0627\\u0644\\u0645\\u062e\\u062a\\u0627\\u0631\",\"counter_cta\":\"\\u0639\\u0631\\u0636 \\u0627\\u0644\\u0639\\u0631\\u0636\",\"discount_combo\":\"\\u062e\\u0635\\u0645 \\u0627\\u0644\\u062f\\u0645\\u062c\",\"discount_impact\":\"\\u0645\\u0643\\u0627\\u0641\\u0623\\u0629 Seven Impact\",\"wa_header\":\"\\u0645\\u0631\\u062d\\u0628\\u064b\\u0627 Seven Grounds\\u060c \\u0623\\u0631\\u063a\\u0628 \\u0628\\u0647\\u0630\\u0627 \\u0627\\u0644\\u0639\\u0631\\u0636:\",\"wa_services\":\"\\u0627\\u0644\\u062e\\u062f\\u0645\\u0627\\u062a:\",\"wa_subtotal\":\"\\u0627\\u0644\\u0645\\u062c\\u0645\\u0648\\u0639 \\u0627\\u0644\\u0641\\u0631\\u0639\\u064a\",\"wa_discount\":\"\\u062e\\u0635\\u0645 \\u0627\\u0644\\u062f\\u0645\\u062c\",\"wa_total\":\"\\u0627\\u0644\\u062a\\u0642\\u062f\\u064a\\u0631 \\u0627\\u0644\\u0646\\u0647\\u0627\\u0626\\u064a\",\"wa_impact\":\"Seven Impact: \\u0645\\u064f\\u0641\\u0639\\u064e\\u0651\\u0644\",\"wa_name\":\"\\u0627\\u0644\\u0627\\u0633\\u0645\",\"wa_project\":\"\\u0627\\u0644\\u0645\\u0634\\u0631\\u0648\\u0639\",\"wa_payment\":\"\\u0645\\u0644\\u0627\\u062d\\u0638\\u0629: \\u0627\\u0644\\u062f\\u0641\\u0639\\u0629 \\u0627\\u0644\\u0623\\u0648\\u0644\\u0649 \\u0634\\u0647\\u0631 \\u0648\\u0627\\u062d\\u062f \\u0645\\u0642\\u062f\\u0645\\u064b\\u0627 \\u0639\\u0646\\u062f \\u0628\\u062f\\u0621 \\u0627\\u0644\\u0639\\u0645\\u0644.\"},\"phone\":\"905432261705\",\"isRtl\":true,\"impactBonus\":25};\n    var selected = new Set();\n    var impactActive = false;\n\n    function formatMoney(n) {\n        return '$' + Math.round(n).toLocaleString('en-US');\n    }\n\n    function calcTotals() {\n        var monthly = 0;\n        var oneTime = 0;\n        var items = [];\n        selected.forEach(function(id) {\n            var s = data.services.find(function(x){return x.id === id;});\n            if (!s) return;\n            if (s.billing === 'monthly') monthly += s.price;\n            else oneTime += s.price;\n            items.push(s);\n        });\n\n        var count = selected.size;\n        var comboPct = 0;\n        var keys = Object.keys(data.discounts).map(Number).sort(function(a,b){return a-b;});\n        keys.forEach(function(k){ if (count >= k) comboPct = data.discounts[k]; });\n\n        \/\/ Impact bonus is added on top of the combo discount when active\n        var impactPct = impactActive ? (data.impactBonus || 0) : 0;\n        var totalPct = comboPct + impactPct;\n        \/\/ Cap at 50% so it never looks unrealistic\n        if (totalPct > 50) totalPct = 50;\n\n        var subtotal = monthly + oneTime;\n        var discountAmount = subtotal * (totalPct \/ 100);\n        var finalMonthly = monthly - monthly * (totalPct \/ 100);\n        var finalOneTime = oneTime - oneTime * (totalPct \/ 100);\n\n        return {\n            items: items,\n            count: count,\n            monthly: monthly,\n            oneTime: oneTime,\n            subtotal: subtotal,\n            pct: totalPct,\n            comboPct: comboPct,\n            impactPct: impactPct,\n            discountAmount: discountAmount,\n            finalMonthly: finalMonthly,\n            finalOneTime: finalOneTime,\n            finalTotal: finalMonthly + finalOneTime\n        };\n    }\n\n    function renderSummary() {\n        var totals = calcTotals();\n        var empty = document.querySelector('.seven-summary-empty');\n        var itemsEl = document.querySelector('.seven-summary-items');\n        var totalsEl = document.querySelector('.seven-summary-totals');\n        var finalEl = document.querySelector('.seven-summary-final');\n        var noteEl = document.querySelector('.seven-summary-note');\n        var ctasEl = document.querySelector('.seven-summary-ctas');\n        var formEl = document.querySelector('.seven-client-form');\n        var impactBadge = document.querySelector('.seven-impact-badge');\n        var welcomeEl = document.querySelector('.seven-impact-welcome');\n\n        \/\/ Impact badge + welcome banner \u2014 independent of service count\n        if (impactActive) {\n            impactBadge.classList.remove('hidden');\n            if (welcomeEl) welcomeEl.classList.remove('hidden');\n        } else {\n            impactBadge.classList.add('hidden');\n            if (welcomeEl) welcomeEl.classList.add('hidden');\n        }\n\n        if (totals.count === 0) {\n            empty.classList.remove('hidden');\n            itemsEl.classList.add('hidden');\n            totalsEl.classList.add('hidden');\n            finalEl.classList.add('hidden');\n            noteEl.classList.add('hidden');\n            ctasEl.classList.add('hidden');\n            if (formEl) formEl.classList.add('hidden');\n            return;\n        }\n\n        empty.classList.add('hidden');\n        itemsEl.classList.remove('hidden');\n        totalsEl.classList.remove('hidden');\n        finalEl.classList.remove('hidden');\n        noteEl.classList.remove('hidden');\n        ctasEl.classList.remove('hidden');\n        if (formEl) formEl.classList.remove('hidden');\n\n        \/\/ Line items\n        itemsEl.innerHTML = '';\n        totals.items.forEach(function(s) {\n            var li = document.createElement('li');\n            li.className = 'flex items-center justify-between gap-3 rounded-2xl border border-white\/10 bg-white\/[0.04] p-4';\n            var billingLbl = s.billing === 'monthly' ? data.t.per_month : data.t.per_project;\n            li.innerHTML = '<div class=\"text-sm text-white\/85\">' + s.title + '<\/div>' +\n                '<div class=\"text-sm font-semibold\" translate=\"no\">' + formatMoney(s.price) +\n                '<span class=\"text-xs font-normal text-white\/50 ms-1\">' + billingLbl + '<\/span><\/div>';\n            itemsEl.appendChild(li);\n        });\n\n        \/\/ Totals\n        document.querySelector('.seven-subtotal').textContent = formatMoney(totals.subtotal);\n        var comboRow = document.querySelector('.seven-discount-combo-row');\n        var impactRow = document.querySelector('.seven-discount-impact-row');\n\n        if (totals.comboPct > 0) {\n            comboRow.classList.remove('hidden');\n            document.querySelector('.seven-combo-pct').textContent = '(\u2212' + totals.comboPct + '%)';\n            var comboAmt = totals.subtotal * (totals.comboPct \/ 100);\n            document.querySelector('.seven-combo-amount').textContent = '\u2212' + formatMoney(comboAmt);\n        } else {\n            comboRow.classList.add('hidden');\n        }\n\n        if (totals.impactPct > 0) {\n            impactRow.classList.remove('hidden');\n            document.querySelector('.seven-impact-pct').textContent = '(\u2212' + totals.impactPct + '%)';\n            var impactAmt = totals.subtotal * (totals.impactPct \/ 100);\n            document.querySelector('.seven-impact-amount').textContent = '\u2212' + formatMoney(impactAmt);\n        } else {\n            impactRow.classList.add('hidden');\n        }\n\n        \/\/ Final price display \u2014 compose smart breakdown\n        var finalPriceEl = document.querySelector('.seven-final-price');\n        var breakdownEl = document.querySelector('.seven-final-breakdown');\n        if (totals.monthly > 0 && totals.oneTime > 0) {\n            finalPriceEl.textContent = formatMoney(totals.finalTotal);\n            breakdownEl.textContent = formatMoney(totals.finalMonthly) + ' ' + data.t.monthly_recurring + '  +  ' + formatMoney(totals.finalOneTime) + ' ' + data.t.one_time;\n        } else if (totals.monthly > 0) {\n            finalPriceEl.textContent = formatMoney(totals.finalMonthly);\n            breakdownEl.textContent = data.t.monthly_recurring;\n        } else {\n            finalPriceEl.textContent = formatMoney(totals.finalOneTime);\n            breakdownEl.textContent = data.t.one_time;\n        }\n\n        \/\/ Impact badge + welcome banner handled at top of renderSummary (shown regardless of service count)\n\n        \/\/ Nothing to do with WhatsApp href here \u2014 it's built on click (see below).\n    }\n\n    function buildWhatsAppMessage() {\n        var totals = calcTotals();\n        var nameInput = document.getElementById('seven-client-name');\n        var projectInput = document.getElementById('seven-client-project');\n        var name = (nameInput && nameInput.value || '').trim();\n        var project = (projectInput && projectInput.value || '').trim();\n\n        var msg = data.t.wa_header;\n        if (name) msg += '\\n\\n' + data.t.wa_name + ': ' + name;\n        if (project) msg += '\\n' + data.t.wa_project + ': ' + project;\n\n        msg += '\\n\\n' + data.t.wa_services + '\\n';\n        totals.items.forEach(function(s) {\n            var billingLbl = s.billing === 'monthly' ? data.t.per_month : data.t.per_project;\n            msg += '\u2022 ' + s.title + ' \u2014 ' + formatMoney(s.price) + billingLbl + '\\n';\n        });\n        msg += '\\n' + data.t.wa_subtotal + ': ' + formatMoney(totals.subtotal);\n        if (totals.comboPct > 0) {\n            var comboAmt = totals.subtotal * (totals.comboPct \/ 100);\n            msg += '\\n' + data.t.discount_combo + ' (\u2212' + totals.comboPct + '%): \u2212' + formatMoney(comboAmt);\n        }\n        if (totals.impactPct > 0) {\n            var impactAmt = totals.subtotal * (totals.impactPct \/ 100);\n            msg += '\\n\ud83c\udf31 ' + data.t.discount_impact + ' (\u2212' + totals.impactPct + '%): \u2212' + formatMoney(impactAmt);\n        }\n        msg += '\\n' + data.t.wa_total + ': ' + formatMoney(totals.finalTotal);\n        msg += '\\n\\n' + data.t.wa_payment;\n        if (impactActive) {\n            msg += '\\n\\n' + data.t.wa_impact;\n        }\n        return msg;\n    }\n\n    function updateBuilderUI() {\n        var totals = calcTotals();\n        var count = totals.count;\n\n        \/\/ Dynamic headline\n        var headlineEl = document.querySelector('.seven-builder-headline .seven-highlight');\n        if (headlineEl) {\n            if (count === 0) {\n                headlineEl.textContent = data.t.builder_h0;\n            } else if (count === 1) {\n                headlineEl.textContent = data.t.builder_h1;\n            } else {\n                headlineEl.textContent = data.t.builder_hn.replace('{n}', count);\n            }\n        }\n\n        \/\/ Stepper \u2014 step 1 is active until a service is selected; then 2 activates when at least 1 service picked (ready for Impact); 3 activates when name+project are filled\n        var steps = document.querySelectorAll('.seven-step');\n        var nameInput = document.getElementById('seven-client-name');\n        var projectInput = document.getElementById('seven-client-project');\n        var hasClientInfo = nameInput && projectInput &&\n                            (nameInput.value || '').trim() &&\n                            (projectInput.value || '').trim();\n        steps.forEach(function(step, i) {\n            step.classList.remove('seven-step-active', 'seven-step-done');\n            if (i === 0) {\n                if (count > 0) step.classList.add('seven-step-done');\n                else step.classList.add('seven-step-active');\n            } else if (i === 1) {\n                if (count > 0 && !hasClientInfo) step.classList.add('seven-step-active');\n                else if (count > 0 && hasClientInfo) step.classList.add('seven-step-done');\n            } else if (i === 2) {\n                if (count > 0 && hasClientInfo) step.classList.add('seven-step-active');\n            }\n        });\n\n        \/\/ Sticky counter bar\n        var counterBar = document.querySelector('.seven-counter-bar');\n        var counterNum = document.querySelector('.seven-counter-number');\n        var counterTotal = document.querySelector('.seven-counter-total');\n        if (counterBar) {\n            if (count > 0) {\n                counterBar.classList.remove('hidden');\n                counterNum.textContent = count;\n                counterTotal.textContent = formatMoney(totals.finalTotal);\n            } else {\n                counterBar.classList.add('hidden');\n            }\n        }\n    }\n\n    \/\/ Wire up service cards\n    var grid = document.getElementById('seven-service-grid');\n    document.querySelectorAll('.seven-service-card').forEach(function(card) {\n        card.addEventListener('click', function() {\n            \/\/ Mark grid as active on first click \u2014 kills the attention pulse\n            if (grid) grid.classList.add('seven-service-grid-active');\n            var id = card.getAttribute('data-service-id');\n            if (selected.has(id)) {\n                selected.delete(id);\n                card.classList.remove('seven-selected');\n                card.setAttribute('aria-pressed', 'false');\n            } else {\n                selected.add(id);\n                card.classList.add('seven-selected');\n                card.setAttribute('aria-pressed', 'true');\n            }\n            renderSummary();\n            updateBuilderUI();\n        });\n    });\n\n    \/\/ Wire up Seven Impact toggle\n    var impactBtn = document.getElementById('seven-impact-toggle');\n    impactBtn.addEventListener('click', function() {\n        impactActive = !impactActive;\n        impactBtn.setAttribute('aria-pressed', impactActive ? 'true' : 'false');\n        impactBtn.classList.toggle('seven-impact-on', impactActive);\n        renderSummary();\n        updateBuilderUI();\n    });\n\n    \/\/ Wire up WhatsApp CTA \u2014 validate inputs, then open WhatsApp with the message.\n    var waBtn = document.getElementById('seven-wa-cta');\n    waBtn.addEventListener('click', function(ev) {\n        ev.preventDefault();\n        var nameInput = document.getElementById('seven-client-name');\n        var projectInput = document.getElementById('seven-client-project');\n        var errEl = document.querySelector('.seven-form-error');\n        var name = (nameInput && nameInput.value || '').trim();\n        var project = (projectInput && projectInput.value || '').trim();\n\n        if (!name || !project) {\n            if (errEl) errEl.classList.remove('hidden');\n            if (!name && nameInput) nameInput.focus();\n            else if (projectInput) projectInput.focus();\n            \/\/ subtle shake on the form\n            var formEl = document.querySelector('.seven-client-form');\n            if (formEl) {\n                formEl.classList.add('seven-form-shake');\n                setTimeout(function(){ formEl.classList.remove('seven-form-shake'); }, 420);\n            }\n            return;\n        }\n\n        if (errEl) errEl.classList.add('hidden');\n        var msg = buildWhatsAppMessage();\n        var waUrl = 'https:\/\/api.whatsapp.com\/send\/?phone=' + data.phone + '&text=' + encodeURIComponent(msg) + '&type=phone_number&app_absent=0';\n        window.open(waUrl, '_blank', 'noopener');\n    });\n\n    \/\/ Clear error + advance stepper when user types in name\/project\n    ['seven-client-name', 'seven-client-project'].forEach(function(id) {\n        var el = document.getElementById(id);\n        if (el) el.addEventListener('input', function() {\n            var errEl = document.querySelector('.seven-form-error');\n            if (errEl) errEl.classList.add('hidden');\n            updateBuilderUI();\n        });\n    });\n\n    \/\/ Initial render\n    renderSummary();\n    updateBuilderUI();\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"seven-offer-template.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-59588","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Seven Offer - 7Grounds<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/7grounds.org\/ar\/seven-offer\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Seven Offer - 7Grounds\" \/>\n<meta property=\"og:url\" content=\"https:\/\/7grounds.org\/ar\/seven-offer\/\" \/>\n<meta property=\"og:site_name\" content=\"7Grounds\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/7grounds.org\\\/seven-offer\\\/\",\"url\":\"https:\\\/\\\/7grounds.org\\\/seven-offer\\\/\",\"name\":\"Seven Offer - 7Grounds\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/7grounds.org\\\/#website\"},\"datePublished\":\"2026-04-19T22:00:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/7grounds.org\\\/seven-offer\\\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/7grounds.org\\\/seven-offer\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/7grounds.org\\\/seven-offer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/olive-pony-798036.hostingersite.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Seven Offer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/7grounds.org\\\/#website\",\"url\":\"https:\\\/\\\/7grounds.org\\\/\",\"name\":\"7Ground\",\"description\":\"Building Projects &amp; Creating Real Investment Opportunities\",\"publisher\":{\"@id\":\"https:\\\/\\\/7grounds.org\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/7grounds.org\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/7grounds.org\\\/#organization\",\"name\":\"7Ground\",\"url\":\"https:\\\/\\\/7grounds.org\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/7grounds.org\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/7grounds.org\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/login-logo-dark.png\",\"contentUrl\":\"http:\\\/\\\/7grounds.org\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/login-logo-dark.png\",\"width\":617,\"height\":252,\"caption\":\"7Ground\"},\"image\":{\"@id\":\"https:\\\/\\\/7grounds.org\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Seven Offer - 7Grounds","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/7grounds.org\/ar\/seven-offer\/","og_locale":"ar_AR","og_type":"article","og_title":"Seven Offer - 7Grounds","og_url":"https:\/\/7grounds.org\/ar\/seven-offer\/","og_site_name":"7Grounds","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/7grounds.org\/seven-offer\/","url":"https:\/\/7grounds.org\/seven-offer\/","name":"Seven Offer - 7Grounds","isPartOf":{"@id":"https:\/\/7grounds.org\/#website"},"datePublished":"2026-04-19T22:00:57+00:00","breadcrumb":{"@id":"https:\/\/7grounds.org\/seven-offer\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/7grounds.org\/seven-offer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/7grounds.org\/seven-offer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/olive-pony-798036.hostingersite.com\/"},{"@type":"ListItem","position":2,"name":"Seven Offer"}]},{"@type":"WebSite","@id":"https:\/\/7grounds.org\/#website","url":"https:\/\/7grounds.org\/","name":"7Ground","description":"Building Projects &amp; Creating Real Investment Opportunities","publisher":{"@id":"https:\/\/7grounds.org\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/7grounds.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/7grounds.org\/#organization","name":"7Ground","url":"https:\/\/7grounds.org\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/7grounds.org\/#\/schema\/logo\/image\/","url":"http:\/\/7grounds.org\/wp-content\/uploads\/2025\/12\/login-logo-dark.png","contentUrl":"http:\/\/7grounds.org\/wp-content\/uploads\/2025\/12\/login-logo-dark.png","width":617,"height":252,"caption":"7Ground"},"image":{"@id":"https:\/\/7grounds.org\/#\/schema\/logo\/image\/"}}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/7grounds.org\/ar\/wp-json\/wp\/v2\/pages\/59588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/7grounds.org\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/7grounds.org\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/7grounds.org\/ar\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/7grounds.org\/ar\/wp-json\/wp\/v2\/comments?post=59588"}],"version-history":[{"count":0,"href":"https:\/\/7grounds.org\/ar\/wp-json\/wp\/v2\/pages\/59588\/revisions"}],"wp:attachment":[{"href":"https:\/\/7grounds.org\/ar\/wp-json\/wp\/v2\/media?parent=59588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}