Spaces:

Alinabil1
/

last_edit

Sleeping

App Files Files Community

last_edit / index.html

Alinabil1

Upload index.html with huggingface_hub

dfb85cc verified about 1 month ago

raw

history blame contribute delete

143 kB

	<!DOCTYPE html>
	<html lang="ar" dir="rtl">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>محرك — Search Growth System</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link
	href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Tajawal:wght@300;400;500;700;900&display=swap"
	rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
	<style>
	:root {
	--p: #0F4246;
	--p-light: #1a6b72;
	--p-dark: #071f21;
	--black: #071f21;
	--white: #ffffff;
	--off: #f3f5f5;
	--accent: #c8f04e;
	--accent2: #5fd4dc;
	--gray: #8a9a9b;
	--border: rgba(15, 66, 70, 0.1);
	--border-w: rgba(255, 255, 255, 0.08);
	--border-dark: rgba(255, 255, 255, 0.12);
	--red: #ff4d4d;
	--yellow: #fbbf24;
	--green: #4ade80;
	--neon-green: #39ff14;
	--neon-cyan: #00f5ff;
	--card-bg: rgba(255, 255, 255, 0.04);
	--card-hover: rgba(255, 255, 255, 0.08);
	--glow-green: rgba(200, 240, 78, 0.4);
	--glow-cyan: rgba(95, 212, 220, 0.4);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
	}

	html {
	scroll-behavior: smooth
	}

	body {
	font-family: 'Cairo', 'Tajawal', sans-serif;
	background: var(--p-dark);
	color: var(--white);
	overflow-x: hidden;
	direction: rtl
	}

	/* ══ NAV ══ */
	nav {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 5vw;
	height: 68px;
	background: rgba(7, 31, 33, 0.97);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	transition: box-shadow .3s;
	}

	.logo {
	font-weight: 900;
	font-size: 1.75rem;
	color: var(--white);
	letter-spacing: -1px;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none
	}

	.logo-dot {
	width: 9px;
	height: 9px;
	background: var(--accent);
	border-radius: 50%
	}

	.nav-links {
	display: flex;
	gap: 2rem;
	align-items: center;
	list-style: none
	}

	.nav-links a {
	text-decoration: none;
	color: rgba(255, 255, 255, .55);
	font-weight: 600;
	font-size: .88rem;
	transition: color .2s
	}

	.nav-links a:hover {
	color: var(--white)
	}

	.nav-cta {
	background: var(--accent) !important;
	color: var(--p) !important;
	padding: .45rem 1.3rem;
	border-radius: 50px;
	font-weight: 800 !important;
	transition: transform .2s, box-shadow .2s !important
	}

	.nav-cta:hover {
	transform: scale(1.04) !important;
	box-shadow: 0 6px 20px rgba(200, 240, 78, .3) !important
	}

	/* ══════════════════════════════════════════
	SECTION 1 — HERO
	══════════════════════════════════════════ */
	.hero {
	min-height: 100vh;
	background: var(--p-dark);
	position: relative;
	display: flex;
	align-items: center;
	padding: 9rem 5vw 6rem;
	overflow: hidden;
	}

	.hero-bg-grid {
	position: absolute;
	inset: 0;
	background-image:
	linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
	linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
	background-size: 72px 72px;
	animation: gridMove 20s linear infinite;
	}

	@keyframes gridMove {
	0% {
	background-position: 0 0
	}

	100% {
	background-position: 72px 72px
	}
	}

	.hero-glow-1 {
	position: absolute;
	width: 700px;
	height: 700px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(15, 66, 70, .85) 0%, transparent 70%);
	top: -150px;
	right: -150px;
	pointer-events: none;
	animation: glowBreath 6s ease-in-out infinite
	}

	.hero-glow-2 {
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(95, 212, 220, .07) 0%, transparent 70%);
	bottom: -80px;
	left: 5%;
	pointer-events: none;
	animation: glowBreath 8s ease-in-out infinite reverse
	}

	.hero-glow-3 {
	position: absolute;
	width: 350px;
	height: 350px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200, 240, 78, .05) 0%, transparent 70%);
	top: 25%;
	left: 40%;
	pointer-events: none;
	animation: glowBreath 10s ease-in-out infinite
	}

	@keyframes glowBreath {

	0%,
	100% {
	transform: scale(1);
	opacity: .7
	}

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

	.hero-scan {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 0%, rgba(95, 212, 220, .03) 50%, transparent 100%);
	background-size: 100% 200px;
	animation: scanMove 8s linear infinite;
	}

	@keyframes scanMove {
	0% {
	background-position: 0 -200px
	}

	100% {
	background-position: 0 100vh
	}
	}

	.hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 5rem;
	align-items: center;
	width: 100%;
	}

	.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(200, 240, 78, .08);
	border: 1px solid rgba(200, 240, 78, .25);
	color: var(--accent);
	font-size: .72rem;
	font-weight: 800;
	padding: .35rem 1.1rem;
	border-radius: 50px;
	margin-bottom: 2rem;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	animation: fadeUp .6s both;
	}

	.eyebrow-pulse {
	width: 7px;
	height: 7px;
	background: var(--neon-green);
	border-radius: 50%;
	animation: blink 1.5s infinite;
	flex-shrink: 0;
	box-shadow: 0 0 6px var(--neon-green)
	}

	.hero h1 {
	font-size: clamp(2.6rem, 4vw, 3.8rem);
	font-weight: 900;
	color: var(--white);
	line-height: 1.12;
	margin-bottom: 1.4rem;
	animation: fadeUp .6s .08s both;
	}

	.hero-headline-pre {
	display: block;
	color: rgba(255, 255, 255, .45);
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	font-weight: 500;
	margin-bottom: .5rem;
	letter-spacing: .3px;
	}

	.hero-headline-sub {
	display: block;
	color: var(--accent);
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	font-weight: 600;
	margin-bottom: .6rem;
	}

	.glow-word {
	display: inline-block;
	color: var(--accent);
	position: relative;
	text-shadow: 0 0 30px rgba(200, 240, 78, .5), 0 0 60px rgba(200, 240, 78, .25);
	animation: wordGlow 3s ease-in-out infinite;
	}

	@keyframes wordGlow {

	0%,
	100% {
	text-shadow: 0 0 20px rgba(200, 240, 78, .5), 0 0 40px rgba(200, 240, 78, .2)
	}

	50% {
	text-shadow: 0 0 40px rgba(200, 240, 78, .9), 0 0 80px rgba(200, 240, 78, .4), 0 0 120px rgba(57, 255, 20, .2)
	}
	}

	.glow-word::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan), var(--neon-green));
	background-size: 200%;
	border-radius: 2px;
	animation: underlineFlow 2s linear infinite;
	box-shadow: 0 0 8px var(--neon-green);
	}

	@keyframes underlineFlow {
	0% {
	background-position: 0%
	}

	100% {
	background-position: 200%
	}
	}

	.hero-sub {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, .62);
	line-height: 1.95;
	max-width: 530px;
	margin-bottom: 1.6rem;
	animation: fadeUp .6s .2s both;
	}

	.hero-sub .platform-pill {
	display: inline-block;
	background: rgba(95, 212, 220, .12);
	border: 1px solid rgba(95, 212, 220, .25);
	color: var(--accent2);
	padding: .05rem .55rem;
	border-radius: 50px;
	font-size: .88em;
	font-weight: 700;
	margin: 0 .1rem;
	transition: all .2s;
	}

	.hero-supporting {
	font-size: .92rem;
	color: var(--accent2);
	font-weight: 700;
	background: rgba(95, 212, 220, .07);
	border: 1px solid rgba(95, 212, 220, .2);
	border-right: 3px solid var(--accent2);
	padding: .65rem 1.2rem;
	border-radius: 0 12px 12px 0;
	display: inline-block;
	margin-bottom: 2.2rem;
	animation: fadeUp .6s .28s both;
	position: relative;
	overflow: hidden;
	}

	.hero-supporting::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(95, 212, 220, .08), transparent);
	animation: shimmer 3s infinite;
	}

	@keyframes shimmer {
	0% {
	left: -100%
	}

	100% {
	left: 200%
	}
	}

	.hero-ctas {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
	animation: fadeUp .6s .32s both;
	margin-bottom: .5rem
	}

	.btn-primary {
	background: linear-gradient(135deg, var(--accent), #a8d630);
	color: var(--p-dark);
	border: none;
	padding: 1rem 2.4rem;
	border-radius: 50px;
	font-family: 'Cairo', sans-serif;
	font-weight: 900;
	font-size: 1rem;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	transition: transform .25s, box-shadow .25s;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 0 0 rgba(200, 240, 78, 0);
	}

	.btn-primary::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
	transition: left .5s;
	}

	.btn-primary:hover::before {
	left: 100%
	}

	.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(200, 240, 78, .45), 0 0 30px rgba(200, 240, 78, .25)
	}

	.btn-ghost {
	background: transparent;
	color: rgba(255, 255, 255, .8);
	border: 1.5px solid rgba(255, 255, 255, .2);
	padding: 1rem 2.4rem;
	border-radius: 50px;
	font-family: 'Cairo', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	transition: all .25s;
	}

	.btn-ghost:hover {
	border-color: var(--accent2);
	background: rgba(95, 212, 220, .08);
	color: var(--white);
	box-shadow: 0 0 20px rgba(95, 212, 220, .15)
	}

	.hero-stats {
	display: flex;
	gap: 0;
	margin-top: 3rem;
	animation: fadeUp .6s .4s both;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 18px;
	overflow: hidden;
	backdrop-filter: blur(10px);
	}

	.hstat {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.2rem 2rem;
	flex: 1;
	border-left: 1px solid rgba(255, 255, 255, .08);
	position: relative;
	transition: background .25s;
	}

	.hstat:hover {
	background: rgba(255, 255, 255, .05)
	}

	.hstat:last-child {
	border-left: none
	}

	.hstat-val {
	font-size: 1.9rem;
	font-weight: 900;
	color: var(--accent);
	line-height: 1;
	text-shadow: 0 0 15px rgba(200, 240, 78, .25)
	}

	.hstat-lbl {
	font-size: .7rem;
	color: rgba(255, 255, 255, .4);
	margin-top: .4rem;
	font-weight: 600;
	text-align: center;
	line-height: 1.4
	}

	/* ── Hero Right Visual Card ── */
	.hero-visual {
	animation: fadeUp .6s .15s both
	}

	.hv-card {
	background: rgba(7, 31, 33, .6);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 28px;
	padding: 1.8rem;
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(24px);
	box-shadow: 0 8px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
	}

	.hv-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-green), var(--neon-cyan), transparent);
	background-size: 200%;
	animation: borderFlow 3s linear infinite;
	}

	@keyframes borderFlow {
	0% {
	background-position: 0%
	}

	100% {
	background-position: 200%
	}
	}

	.hv-card::after {
	content: '';
	position: absolute;
	top: -60px;
	left: -60px;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(95, 212, 220, .12) 0%, transparent 70%);
	pointer-events: none;
	}

	.hv-label {
	font-size: .65rem;
	font-weight: 900;
	color: rgba(255, 255, 255, .35);
	text-transform: uppercase;
	letter-spacing: 2.5px;
	margin-bottom: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	}

	.hv-label-left {
	display: flex;
	align-items: center;
	gap: .5rem
	}

	.hv-label-left::before {
	content: '';
	width: 8px;
	height: 8px;
	background: var(--neon-green);
	border-radius: 50%;
	animation: blink 1.5s infinite;
	box-shadow: 0 0 6px var(--neon-green);
	}

	.hv-live-badge {
	background: rgba(57, 255, 20, .12);
	border: 1px solid rgba(57, 255, 20, .3);
	color: var(--neon-green);
	font-size: .6rem;
	font-weight: 800;
	padding: .15rem .6rem;
	border-radius: 50px;
	letter-spacing: 1px;
	animation: livePulse 2s ease-in-out infinite;
	}

	@keyframes livePulse {

	0%,
	100% {
	box-shadow: 0 0 0 0 rgba(57, 255, 20, .3)
	}

	50% {
	box-shadow: 0 0 0 5px rgba(57, 255, 20, 0)
	}
	}

	.hv-engines {
	display: flex;
	flex-direction: column;
	gap: .6rem
	}

	.hv-eng {
	display: flex;
	align-items: center;
	gap: .9rem;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 14px;
	padding: .85rem 1.1rem;
	transition: all .3s;
	cursor: default;
	position: relative;
	overflow: hidden;
	}

	.hv-eng::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 3px;
	border-radius: 0 2px 2px 0;
	opacity: 0;
	transition: opacity .3s;
	background: var(--eng-color, var(--accent));
	}

	.hv-eng:hover {
	background: rgba(255, 255, 255, .07);
	transform: translateX(-3px);
	border-color: rgba(255, 255, 255, .14)
	}

	.hv-eng:hover::before {
	opacity: 1
	}

	.hv-eng-icon {
	font-size: 1.15rem;
	flex-shrink: 0;
	width: 28px;
	text-align: center
	}

	.hv-eng-info {
	flex: 1;
	min-width: 0
	}

	.hv-eng-name {
	font-size: .88rem;
	font-weight: 800;
	color: var(--white);
	display: block;
	line-height: 1.3
	}

	.hv-eng-sub {
	font-size: .62rem;
	color: rgba(255, 255, 255, .3);
	font-weight: 500;
	margin-top: .1rem;
	display: block
	}

	.hv-eng-status {
	font-size: .65rem;
	font-weight: 800;
	padding: .2rem .65rem;
	border-radius: 50px;
	white-space: nowrap;
	flex-shrink: 0;
	}

	.s-green {
	background: rgba(200, 240, 78, .12);
	color: var(--accent);
	border: 1px solid rgba(200, 240, 78, .25)
	}

	.s-teal {
	background: rgba(95, 212, 220, .12);
	color: var(--accent2);
	border: 1px solid rgba(95, 212, 220, .25)
	}

	.s-purple {
	background: rgba(147, 112, 219, .12);
	color: #b39ddb;
	border: 1px solid rgba(147, 112, 219, .25)
	}

	.s-yellow {
	background: rgba(251, 191, 36, .12);
	color: var(--yellow);
	border: 1px solid rgba(251, 191, 36, .25)
	}

	.s-dim {
	background: rgba(255, 255, 255, .07);
	color: rgba(255, 255, 255, .45);
	border: 1px solid rgba(255, 255, 255, .12)
	}

	.hv-eng-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 0 6px currentColor
	}

	.hv-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .6rem;
	margin-top: 1.2rem;
	}

	.hv-m {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 14px;
	padding: .9rem .6rem;
	text-align: center;
	transition: transform .25s, background .25s;
	}

	.hv-m:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, .08)
	}

	.hv-m-val {
	font-size: 1.3rem;
	font-weight: 900;
	color: var(--accent);
	display: block;
	text-shadow: 0 0 10px rgba(200, 240, 78, .2)
	}

	.hv-m-lbl {
	font-size: .62rem;
	color: rgba(255, 255, 255, .35);
	margin-top: .25rem;
	font-weight: 600;
	display: block;
	line-height: 1.3
	}

	.hv-journey {
	margin-top: 1.2rem;
	padding: 1rem 1.2rem;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	}

	.hv-journey-label {
	font-size: .6rem;
	color: rgba(255, 255, 255, .3);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: .7rem
	}

	.hv-journey-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .3rem
	}

	.hv-j-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	flex: 1
	}

	.hv-j-icon {
	font-size: 1.3rem;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: floatIcon 5s ease-in-out infinite;
	transition: transform .25s, border-color .25s;
	}

	.hv-j-icon:hover {
	border-color: var(--accent2);
	background: rgba(95, 212, 220, .1);
	transform: scale(1.1) !important
	}

	.hv-j-lbl {
	font-size: .55rem;
	color: rgba(255, 255, 255, .3);
	font-weight: 600
	}

	.hv-j-arrow {
	color: rgba(255, 255, 255, .2);
	font-size: .8rem;
	flex-shrink: 0
	}

	.hv-j-item:nth-child(1) .hv-j-icon {
	animation-delay: 0s
	}

	.hv-j-item:nth-child(3) .hv-j-icon {
	animation-delay: .8s
	}

	.hv-j-item:nth-child(5) .hv-j-icon {
	animation-delay: 1.6s
	}

	.hv-j-item:nth-child(7) .hv-j-icon {
	animation-delay: 2.4s
	}

	.hv-j-item:nth-child(9) .hv-j-icon {
	animation-delay: 3.2s
	}

	@keyframes floatIcon {

	0%,
	100% {
	transform: translateY(0)
	}

	50% {
	transform: translateY(-6px)
	}
	}

	.hero-lines {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden
	}

	.hero-line {
	position: absolute;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
	opacity: .25;
	animation: lineFloat 6s ease-in-out infinite;
	}

	.hl1 {
	top: 30%;
	right: 55%;
	width: 120px;
	transform: rotate(-20deg);
	animation-delay: 0s
	}

	.hl2 {
	bottom: 35%;
	left: 55%;
	width: 90px;
	transform: rotate(18deg);
	animation-delay: 2s
	}

	.hl3 {
	top: 55%;
	right: 60%;
	width: 70px;
	transform: rotate(-8deg);
	animation-delay: 4s
	}

	@keyframes lineFloat {

	0%,
	100% {
	opacity: .15;
	transform: translateX(0) rotate(-20deg)
	}

	50% {
	opacity: .5;
	transform: translateX(-15px) rotate(-20deg)
	}
	}

	/* ══════════════════════════════════════════
	SECTION 2 — CUSTOMER JOURNEY
	══════════════════════════════════════════ */
	.journey-section {
	background: var(--p-dark);
	position: relative;
	overflow: hidden;
	padding: 9rem 5vw 8rem;
	}

	.journey-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
	radial-gradient(ellipse 80% 50% at 50% 0%, rgba(15, 66, 70, .5) 0%, transparent 60%),
	radial-gradient(ellipse 60% 40% at 50% 100%, rgba(7, 31, 33, .8) 0%, transparent 60%);
	pointer-events: none;
	}

	.journey-bg-dots {
	position: absolute;
	inset: 0;
	background-image:
	radial-gradient(1.5px 1.5px at 10% 20%, rgba(200, 240, 78, .06) 0%, transparent 100%),
	radial-gradient(1px 1px at 88% 15%, rgba(95, 212, 220, .05) 0%, transparent 100%),
	radial-gradient(2px 2px at 48% 78%, rgba(255, 255, 255, .03) 0%, transparent 100%),
	radial-gradient(1px 1px at 22% 65%, rgba(200, 240, 78, .04) 0%, transparent 100%),
	radial-gradient(1.5px 1.5px at 75% 55%, rgba(95, 212, 220, .04) 0%, transparent 100%);
	}

	.journey-inner {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	margin: 0 auto
	}

	.journey-header {
	text-align: center;
	margin-bottom: 5rem
	}

	.journey-tag {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(95, 212, 220, .09);
	border: 1px solid rgba(95, 212, 220, .22);
	color: var(--accent2);
	font-size: .7rem;
	font-weight: 800;
	padding: .35rem 1.1rem;
	border-radius: 50px;
	margin-bottom: 1.4rem;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	}

	.journey-tag::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--accent2);
	border-radius: 50%;
	animation: blink 2s infinite
	}

	.journey-header h2 {
	font-size: clamp(2.2rem, 4vw, 3.5rem);
	font-weight: 900;
	color: var(--white);
	line-height: 1.15;
	margin-bottom: 1rem;
	}

	.journey-header h2 .accent-text {
	color: var(--accent);
	position: relative;
	display: inline-block;
	}

	.journey-header h2 .accent-text::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan));
	background-size: 200%;
	border-radius: 2px;
	animation: underlineFlow 2.5s linear infinite;
	}

	.journey-sub {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, .52);
	line-height: 1.95;
	max-width: 680px;
	margin: 0 auto 1.2rem;
	}

	.journey-supporting {
	font-size: .93rem;
	color: var(--accent2);
	font-weight: 700;
	background: rgba(95, 212, 220, .07);
	border: 1px solid rgba(95, 212, 220, .18);
	border-right: 3px solid var(--accent2);
	padding: .65rem 1.4rem;
	border-radius: 0 14px 14px 0;
	display: inline-block;
	}

	.journey-flow-wrap {
	margin: 0 auto 2.5rem;
	max-width: 1200px;
	position: relative;
	}

	.journey-track {
	position: absolute;
	top: 65px;
	right: 10%;
	left: 10%;
	height: 2px;
	background: linear-gradient(270deg, rgba(200, 240, 78, .08) 0%, rgba(95, 212, 220, .25) 25%, var(--neon-cyan) 50%, rgba(200, 240, 78, .25) 75%, rgba(200, 240, 78, .08) 100%);
	background-size: 200%;
	animation: trackGlow 4s linear infinite;
	z-index: 0;
	}

	@keyframes trackGlow {
	0% {
	background-position: 0%
	}

	100% {
	background-position: 200%
	}
	}

	.journey-track-dot {
	position: absolute;
	top: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--neon-cyan);
	box-shadow: 0 0 12px var(--neon-cyan);
	animation: dotTravel 6s linear infinite;
	left: 10%;
	}

	@keyframes dotTravel {
	0% {
	left: 10%
	}

	100% {
	left: 90%
	}
	}

	.journey-flow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	position: relative;
	z-index: 1;
	padding: 0 .5rem;
	}

	.j-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	cursor: default;
	transition: transform .35s;
	}

	.j-step:hover {
	transform: translateY(-8px)
	}

	.j-icon-wrap {
	width: 68px;
	height: 68px;
	border-radius: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	margin: 0 auto 1rem;
	position: relative;
	transition: all .35s;
	z-index: 1;
	}

	.j-step:hover .j-icon-wrap,
	.j-step.active .j-icon-wrap {
	background: rgba(95, 212, 220, .12);
	border-color: var(--accent2);
	box-shadow: 0 0 30px rgba(95, 212, 220, .25), inset 0 1px 0 rgba(255, 255, 255, .1);
	transform: scale(1.08);
	}

	.j-step.active .j-icon-wrap {
	background: rgba(200, 240, 78, .12);
	border-color: var(--accent);
	box-shadow: 0 0 30px rgba(200, 240, 78, .25);
	}

	.j-step-num {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--p-dark);
	border: 1px solid rgba(255, 255, 255, .15);
	font-size: .58rem;
	font-weight: 900;
	color: rgba(255, 255, 255, .4);
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.j-step.active .j-step-num {
	border-color: var(--accent);
	color: var(--accent)
	}

	.j-step-card {
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 18px;
	padding: 1.2rem 1rem;
	width: 100%;
	transition: all .35s;
	}

	.j-step:hover .j-step-card {
	background: rgba(95, 212, 220, .06);
	border-color: rgba(95, 212, 220, .2);
	}

	.j-step.active .j-step-card {
	background: rgba(200, 240, 78, .06);
	border-color: rgba(200, 240, 78, .25);
	border-top: 2px solid var(--accent);
	}

	.j-title {
	font-size: .95rem;
	font-weight: 900;
	color: var(--white);
	margin-bottom: .3rem;
	line-height: 1.3
	}

	.j-step.active .j-title {
	color: var(--accent)
	}

	.j-step:hover .j-title {
	color: var(--accent2)
	}

	.j-desc {
	font-size: .72rem;
	color: rgba(255, 255, 255, .4);
	line-height: 1.6;
	margin-bottom: .8rem
	}

	.j-platforms {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	justify-content: center
	}

	.j-tag {
	font-size: .6rem;
	font-weight: 700;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .45);
	padding: .15rem .5rem;
	border-radius: 50px;
	white-space: nowrap;
	transition: all .25s;
	}

	.j-step:hover .j-tag {
	background: rgba(95, 212, 220, .1);
	border-color: var(--accent2);
	color: var(--accent2)
	}

	.j-step.active .j-tag {
	background: rgba(200, 240, 78, .1);
	border-color: var(--accent);
	color: var(--accent)
	}

	.j-arrow {
	display: flex;
	align-items: center;
	padding-top: 34px;
	flex-shrink: 0;
	color: rgba(255, 255, 255, .15);
	font-size: 1.2rem;
	}

	.journey-punchline {
	text-align: center;
	max-width: 700px;
	margin: 3rem auto 0;
	padding: 1.8rem 2.5rem;
	background: rgba(255, 77, 77, .07);
	border: 1px solid rgba(255, 77, 77, .22);
	border-radius: 20px;
	position: relative;
	overflow: hidden;
	}

	.journey-punchline::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 77, 77, .5), transparent);
	}

	.journey-punchline p {
	font-size: 1.08rem;
	color: rgba(255, 255, 255, .72);
	line-height: 1.9;
	font-weight: 600
	}

	.journey-punchline strong {
	color: #ff7070;
	font-weight: 900
	}

	/* ══════════════════════════════════════════
	SECTION 3 — THE SYSTEM
	══════════════════════════════════════════ */
	.system-section {
	background: var(--p-dark);
	position: relative;
	overflow: hidden;
	padding: 9rem 5vw 8rem;
	border-top: 1px solid rgba(255, 255, 255, .06);
	}

	.system-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
	radial-gradient(ellipse 70% 50% at 50% 50%, rgba(15, 66, 70, .7) 0%, transparent 60%),
	radial-gradient(ellipse 40% 30% at 80% 80%, rgba(95, 212, 220, .05) 0%, transparent 60%);
	pointer-events: none;
	}

	.system-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px);
	background-size: 80px 80px;
	pointer-events: none;
	}

	.system-inner {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	margin: 0 auto
	}

	.system-header {
	text-align: center;
	margin-bottom: 2rem
	}

	.system-tag {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(200, 240, 78, .09);
	border: 1px solid rgba(200, 240, 78, .22);
	color: var(--accent);
	font-size: .7rem;
	font-weight: 800;
	padding: .35rem 1.1rem;
	border-radius: 50px;
	margin-bottom: 1.4rem;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	}

	.system-tag::before {
	content: '⚙️';
	font-size: .75rem
	}

	.system-header h2 {
	font-size: clamp(2.2rem, 4vw, 3.5rem);
	font-weight: 900;
	color: var(--white);
	line-height: 1.15;
	margin-bottom: .9rem;
	}

	.system-header h2 .accent-text {
	color: var(--accent)
	}

	.system-sub {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, .52);
	line-height: 1.95;
	max-width: 750px;
	margin: 0 auto 1rem
	}

	.system-supporting {
	font-size: .93rem;
	color: var(--accent);
	font-weight: 700;
	background: rgba(200, 240, 78, .07);
	border: 1px solid rgba(200, 240, 78, .18);
	border-right: 3px solid var(--accent);
	padding: .65rem 1.4rem;
	border-radius: 0 14px 14px 0;
	display: inline-block;
	}

	.system-preline {
	text-align: center;
	max-width: 820px;
	margin: 2.5rem auto 3.5rem;
	padding: 1.3rem 2rem;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 16px;
	font-size: 1rem;
	color: rgba(255, 255, 255, .65);
	line-height: 1.85;
	}

	.system-preline strong {
	color: var(--accent);
	font-weight: 900
	}

	/* 5 Engines Flow */
	.engines-flow-wrap {
	max-width: 1200px;
	margin: 0 auto 3rem;
	position: relative
	}

	.engines-track {
	position: absolute;
	top: 70px;
	right: 8%;
	left: 8%;
	height: 2px;
	background: linear-gradient(270deg, rgba(200, 240, 78, .08) 0%, var(--accent) 50%, rgba(200, 240, 78, .08) 100%);
	background-size: 200%;
	animation: trackGlow 4s linear infinite reverse;
	z-index: 0;
	}

	.engines-track-dot {
	position: absolute;
	top: -5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 14px var(--accent);
	animation: dotTravelReverse 5s linear infinite;
	left: 90%;
	}

	@keyframes dotTravelReverse {
	0% {
	left: 90%
	}

	100% {
	left: 8%
	}
	}

	.engines-flow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .8rem;
	position: relative;
	z-index: 1;
	padding: 0 .5rem;
	}

	.e-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	cursor: default;
	transition: transform .35s;
	}

	.e-card:hover {
	transform: translateY(-8px)
	}

	.e-icon-wrap {
	width: 72px;
	height: 72px;
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.9rem;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	margin: 0 auto 1rem;
	position: relative;
	transition: all .35s;
	z-index: 1;
	}

	.e-card:hover .e-icon-wrap {
	background: rgba(200, 240, 78, .1);
	border-color: var(--accent);
	box-shadow: 0 0 30px rgba(200, 240, 78, .25);
	transform: scale(1.1);
	}

	.e-card.active .e-icon-wrap {
	background: rgba(200, 240, 78, .15);
	border-color: var(--accent);
	box-shadow: 0 0 35px rgba(200, 240, 78, .35), 0 0 60px rgba(57, 255, 20, .1);
	}

	.e-card-num {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--p-dark);
	border: 1px solid rgba(255, 255, 255, .12);
	font-size: .58rem;
	font-weight: 900;
	color: rgba(255, 255, 255, .4);
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.e-card:hover .e-card-num {
	border-color: var(--accent);
	color: var(--accent)
	}

	.e-card-body {
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 18px;
	padding: 1.3rem 1rem;
	width: 100%;
	transition: all .35s;
	}

	.e-card:hover .e-card-body {
	background: rgba(200, 240, 78, .05);
	border-color: rgba(200, 240, 78, .2);
	}

	.e-card.active .e-card-body {
	background: rgba(200, 240, 78, .08);
	border-color: rgba(200, 240, 78, .3);
	border-top: 2px solid var(--accent);
	}

	.e-badge {
	font-size: .6rem;
	font-weight: 800;
	color: rgba(255, 255, 255, .3);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: .4rem;
	display: block
	}

	.e-name {
	font-size: 1rem;
	font-weight: 900;
	color: var(--white);
	margin-bottom: .3rem;
	line-height: 1.3
	}

	.e-card:hover .e-name,
	.e-card.active .e-name {
	color: var(--accent)
	}

	.e-desc {
	font-size: .73rem;
	color: rgba(255, 255, 255, .4);
	line-height: 1.65;
	margin-bottom: .9rem;
	flex: 1
	}

	.e-platforms {
	display: flex;
	flex-wrap: wrap;
	gap: .28rem;
	justify-content: center
	}

	.e-tag {
	font-size: .58rem;
	font-weight: 700;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .45);
	padding: .13rem .48rem;
	border-radius: 50px;
	white-space: nowrap;
	transition: all .25s;
	}

	.e-card:hover .e-tag {
	background: rgba(200, 240, 78, .1);
	border-color: rgba(200, 240, 78, .3);
	color: var(--accent)
	}

	.e-card.active .e-tag {
	background: rgba(200, 240, 78, .12);
	border-color: var(--accent);
	color: var(--accent)
	}

	.e-arrow {
	display: flex;
	align-items: center;
	padding-top: 36px;
	flex-shrink: 0;
	color: rgba(255, 255, 255, .15);
	font-size: 1.1rem
	}

	.system-punchline {
	text-align: center;
	max-width: 800px;
	margin: 2.5rem auto 0;
	padding: 1.6rem 2rem;
	background: rgba(200, 240, 78, .06);
	border: 1px solid rgba(200, 240, 78, .2);
	border-radius: 20px;
	position: relative;
	overflow: hidden;
	}

	.system-punchline::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	}

	.system-punchline p {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, .75);
	line-height: 1.85;
	font-weight: 600
	}

	.system-punchline strong {
	color: var(--accent);
	font-weight: 900
	}

	.comparison-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	max-width: 900px;
	margin: 3rem auto 0;
	}

	.comp-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 22px;
	padding: 2rem;
	transition: transform .3s, box-shadow .3s;
	}

	.comp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .3)
	}

	.comp-card.without {
	border-color: rgba(255, 77, 77, .3);
	background: rgba(255, 77, 77, .05)
	}

	.comp-card.with {
	border-color: rgba(200, 240, 78, .3);
	background: rgba(200, 240, 78, .05);
	position: relative;
	overflow: hidden;
	}

	.comp-card.with::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan));
	}

	.comp-title {
	font-size: 1rem;
	font-weight: 900;
	margin-bottom: 1.3rem;
	display: flex;
	align-items: center;
	gap: .6rem
	}

	.comp-card.without .comp-title {
	color: #ff8080
	}

	.comp-card.with .comp-title {
	color: var(--accent)
	}

	.comp-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .8rem
	}

	.comp-item {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .85rem;
	color: rgba(255, 255, 255, .52);
	line-height: 1.6
	}

	.comp-icon {
	font-size: 1rem;
	flex-shrink: 0;
	margin-top: .15rem
	}

	.comp-card.without .comp-icon {
	color: #ff6b6b
	}

	.comp-card.with .comp-icon {
	color: var(--accent)
	}

	.comp-card.with .comp-item {
	color: rgba(255, 255, 255, .7)
	}

	.system-closing {
	text-align: center;
	max-width: 750px;
	margin: 3.5rem auto 0;
	padding: 2rem 2.5rem;
	background: linear-gradient(135deg, rgba(200, 240, 78, .07) 0%, rgba(95, 212, 220, .05) 100%);
	border: 1px solid rgba(200, 240, 78, .22);
	border-radius: 22px;
	}

	.system-closing p {
	font-size: 1.15rem;
	color: rgba(255, 255, 255, .85);
	line-height: 2;
	font-weight: 600
	}

	.system-closing strong {
	color: var(--accent);
	font-weight: 900
	}

	/* ══ TOOLS SECTION ══ */
	.tools-section {
	background: var(--p-dark);
	border-top: 1px solid rgba(255, 255, 255, .05);
	position: relative;
	overflow: hidden
	}

	.tools-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 50% 55% at 30% 40%, rgba(15, 66, 70, .5) 0%, transparent 65%)
	}

	.tools-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
	margin-bottom: 1.5rem
	}

	.tools-grid .tc:nth-child(n+5) {
	animation-delay: calc(.12s * (var(--index, 0) - 4)) !important
	}

	.tools-grid-btm {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem
	}

	.tc {
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 24px;
	padding: 2rem 1.8rem 1.8rem;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	transition: all .35s cubic-bezier(.4, 0, .2, 1);
	cursor: default;
	backdrop-filter: blur(10px)
	}

	.tc:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(200, 240, 78, .3);
	transform: translateY(-8px);
	box-shadow: 0 20px 50px rgba(200, 240, 78, .15), inset 0 1px 0 rgba(255, 255, 255, .1)
	}

	.tc::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(200, 240, 78, .4), transparent);
	opacity: 0;
	transition: opacity .35s
	}

	.tc:hover::before {
	opacity: 1
	}

	.tc::after {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(200, 240, 78, .08) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none
	}

	.tc-status {
	display: flex;
	align-items: center;
	gap: .35rem;
	font-size: .63rem;
	font-weight: 700;
	margin-bottom: .9rem
	}

	.tc-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 5px rgba(74, 222, 128, .5)
	}

	.tc-stat-text {
	color: rgba(255, 255, 255, .35);
	letter-spacing: .3px
	}

	.tc-badge {
	font-size: .58rem;
	font-weight: 800;
	padding: .1rem .42rem;
	border-radius: 50px;
	margin-right: .2rem
	}

	.badge-pro {
	background: rgba(200, 240, 78, .15);
	color: var(--accent);
	border: 1px solid rgba(200, 240, 78, .2)
	}

	.badge-new {
	background: rgba(95, 212, 220, .13);
	color: var(--accent2);
	border: 1px solid rgba(95, 212, 220, .18)
	}

	.tc-icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.2rem;
	font-size: 1.6rem;
	border: 1.5px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .04);
	transition: all .35s;
	position: relative;
	z-index: 1
	}

	.tc:hover .tc-icon {
	border-color: rgba(200, 240, 78, .4);
	background: rgba(200, 240, 78, .1);
	transform: scale(1.12) rotate(5deg);
	box-shadow: 0 0 20px rgba(200, 240, 78, .2)
	}

	.ic-teal {
	border-color: rgba(95, 212, 220, .22) !important;
	background: rgba(95, 212, 220, .07) !important
	}

	.ic-blue {
	border-color: rgba(96, 165, 250, .22) !important;
	background: rgba(96, 165, 250, .07) !important
	}

	.ic-green {
	border-color: rgba(74, 222, 128, .22) !important;
	background: rgba(74, 222, 128, .07) !important
	}

	.ic-purple {
	border-color: rgba(147, 112, 219, .22) !important;
	background: rgba(147, 112, 219, .07) !important
	}

	.ic-orange {
	border-color: rgba(251, 146, 60, .22) !important;
	background: rgba(251, 146, 60, .07) !important
	}

	.ic-red {
	border-color: rgba(248, 113, 113, .22) !important;
	background: rgba(248, 113, 113, .07) !important
	}

	.ic-yellow {
	border-color: rgba(251, 191, 36, .22) !important;
	background: rgba(251, 191, 36, .07) !important
	}

	.ic-lime {
	border-color: rgba(200, 240, 78, .22) !important;
	background: rgba(200, 240, 78, .07) !important
	}

	.ic-pink {
	border-color: rgba(244, 114, 182, .22) !important;
	background: rgba(244, 114, 182, .07) !important
	}

	.tc-name {
	font-size: 1.05rem;
	font-weight: 900;
	color: var(--white);
	margin-bottom: .5rem;
	line-height: 1.3;
	position: relative;
	z-index: 1
	}

	.tc:hover .tc-name {
	color: var(--accent)
	}

	.tc-desc {
	font-size: .82rem;
	color: rgba(255, 255, 255, .55);
	line-height: 1.7;
	flex: 1;
	margin-bottom: 1.3rem;
	position: relative;
	z-index: 1
	}

	.tc-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .82rem;
	font-weight: 800;
	color: var(--accent);
	background: rgba(200, 240, 78, .08);
	border: 1.5px solid rgba(200, 240, 78, .2);
	padding: .55rem 1.2rem;
	border-radius: 50px;
	cursor: pointer;
	text-decoration: none;
	transition: all .3s;
	width: fit-content;
	font-family: 'Cairo', sans-serif;
	position: relative;
	z-index: 1;
	overflow: hidden
	}

	.tc-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
	transform: translateX(-100%);
	transition: transform .5s
	}

	.tc-btn:hover {
	background: rgba(200, 240, 78, .15);
	border-color: var(--accent);
	color: var(--white);
	box-shadow: 0 8px 24px rgba(200, 240, 78, .2)
	}

	.tc-btn:hover::before {
	transform: translateX(100%)
	}

	.tc-btn-arr {
	font-size: .75rem;
	transition: transform .3s
	}

	.tc-btn:hover .tc-btn-arr {
	transform: translateX(-4px)
	}

	/* ══ COMPARE SECTION ══ */
	.compare-section {
	background: var(--p-dark);
	position: relative;
	overflow: hidden
	}

	.compare-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 40% at 80% 50%, rgba(15, 66, 70, .03) 0%, transparent 65%)
	}

	.compare-wrap {
	border-radius: 22px;
	border: 1px solid var(--border-dark);
	box-shadow: 0 6px 40px rgba(15, 66, 70, .07);
	overflow: hidden;
	background: var(--card-bg)
	}

	.ctable {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem
	}

	.ctable thead th {
	padding: 1.2rem 1.6rem;
	text-align: center;
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .4px;
	position: sticky;
	top: 0;
	z-index: 2;
	background: rgba(255, 255, 255, .05);
	color: var(--white)
	}

	.ctable thead th:first-child {
	text-align: right;
	background: rgba(255, 255, 255, .03);
	color: var(--gray);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: 1.5px
	}

	.ctable thead th.cn {
	background: rgba(255, 255, 255, .03);
	color: #7a9a9e;
	font-size: .82rem
	}

	.ctable thead th.cm {
	background: var(--p);
	color: var(--white);
	position: relative;
	font-size: .88rem
	}

	.ctable thead th.cm::after {
	content: '✦ الاختيار الذكي';
	display: block;
	font-size: .63rem;
	color: var(--accent);
	font-weight: 700;
	margin-top: .22rem
	}

	.ctable tbody tr {
	border-top: 1px solid var(--border-dark);
	transition: background .2s
	}

	.ctable tbody tr:hover {
	background: var(--card-hover)
	}

	.ctable td {
	padding: .95rem 1.6rem;
	color: rgba(255, 255, 255, .7);
	vertical-align: middle
	}

	.ctable td:first-child {
	font-weight: 700;
	font-size: .85rem;
	color: var(--white);
	background: rgba(255, 255, 255, .03)
	}

	.ctable td.cn {
	text-align: center;
	color: #8a9a9b
	}

	.ctable td.cm {
	text-align: center;
	background: rgba(15, 66, 70, .022);
	color: var(--p);
	font-weight: 700
	}

	.ct-y {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	background: rgba(26, 138, 74, .1);
	color: #1a7a40;
	border-radius: 50%;
	font-size: .84rem;
	font-weight: 900
	}

	.ct-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	background: rgba(200, 50, 50, .08);
	color: #c03030;
	border-radius: 50%;
	font-size: .84rem
	}

	.ct-p {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	background: rgba(200, 160, 50, .09);
	color: #a07a10;
	border-radius: 50%;
	font-size: .84rem
	}

	.compare-note {
	display: flex;
	align-items: center;
	gap: .6rem;
	background: rgba(15, 66, 70, .04);
	border: 1px solid var(--border-dark);
	border-radius: 13px;
	padding: 1rem 1.4rem;
	margin-top: 1.4rem;
	font-size: .85rem;
	color: rgba(255, 255, 255, .7)
	}

	.compare-note strong {
	color: var(--accent)
	}

	/* ══ CASES SECTION ══ */
	.cases-section {
	background: var(--p-dark)
	}

	.cases-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 1.4rem
	}

	.ccase {
	background: var(--card-bg);
	border: 1px solid var(--border-dark);
	border-radius: 22px;
	overflow: hidden;
	transition: transform .3s, box-shadow .3s
	}

	.ccase:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 56px rgba(15, 66, 70, .1)
	}

	.ccase-hd {
	background: var(--p);
	padding: 1.6rem 1.8rem;
	position: relative;
	overflow: hidden
	}

	.ccase-hd::after {
	content: '';
	position: absolute;
	top: -35px;
	left: -35px;
	width: 140px;
	height: 140px;
	background: rgba(200, 240, 78, .05);
	border-radius: 50%
	}

	.ccase-sector {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	background: rgba(200, 240, 78, .14);
	border: 1px solid rgba(200, 240, 78, .2);
	color: var(--accent);
	font-size: .68rem;
	font-weight: 700;
	padding: .23rem .72rem;
	border-radius: 50px;
	margin-bottom: .65rem
	}

	.ccase-title {
	font-size: 1.05rem;
	font-weight: 900;
	color: var(--white);
	margin-bottom: .22rem
	}

	.ccase-loc {
	font-size: .76rem;
	color: rgba(255, 255, 255, .38)
	}

	.ccase-engines {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	padding: .85rem 1.8rem;
	border-bottom: 1px solid var(--border-dark);
	background: rgba(15, 66, 70, .02)
	}

	.cce-lbl {
	font-size: .62rem;
	font-weight: 700;
	color: var(--gray);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-left: .5rem;
	align-self: center
	}

	.cce-tag {
	font-size: .64rem;
	font-weight: 800;
	background: rgba(15, 66, 70, .07);
	color: var(--p);
	padding: .18rem .58rem;
	border-radius: 50px;
	border: 1px solid rgba(15, 66, 70, .12)
	}

	.ccase-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: 1px solid var(--border-dark)
	}

	.ccase-m {
	padding: 1rem;
	text-align: center;
	border-left: 1px solid var(--border-dark);
	transition: background .2s
	}

	.ccase-m:first-child {
	border-left: none
	}

	.ccase-m:hover {
	background: rgba(15, 66, 70, .02)
	}

	.ccase-mv {
	font-size: 1.45rem;
	font-weight: 900;
	color: var(--accent);
	display: block;
	line-height: 1
	}

	.ccase-mv.up {
	color: #4ade80
	}

	.ccase-ml {
	font-size: .66rem;
	color: #7a9a9e;
	margin-top: .18rem;
	font-weight: 500
	}

	.ccase-body {
	padding: 1.4rem 1.8rem
	}

	.ccase-ch-lbl {
	font-size: .66rem;
	font-weight: 800;
	color: var(--gray);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: .4rem
	}

	.ccase-ch {
	font-size: .85rem;
	color: rgba(255, 255, 255, .6);
	line-height: 1.7;
	margin-bottom: 1rem
	}

	.ccase-q {
	background: rgba(15, 66, 70, .04);
	border-right: 3px solid var(--p);
	border-radius: 0 11px 11px 0;
	padding: .9rem 1.1rem
	}

	.ccase-q p {
	font-size: .83rem;
	color: var(--white);
	line-height: 1.7;
	font-style: italic
	}

	.ccase-q-name {
	font-size: .72rem;
	color: var(--gray);
	margin-top: .35rem;
	font-weight: 600
	}

	/* ══ PACKAGES SECTION ══ */
	.pkg-section {
	background: var(--p-dark)
	}

	.pkg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.4rem
	}

	.pkg {
	background: var(--card-bg);
	border: 1px solid var(--border-dark);
	border-radius: 24px;
	padding: 2.2rem;
	position: relative;
	transition: transform .3s, border-color .3s;
	overflow: hidden
	}

	.pkg::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	opacity: 0;
	transition: opacity .3s
	}

	.pkg:hover {
	transform: translateY(-5px);
	border-color: rgba(255, 255, 255, .18)
	}

	.pkg:hover::before {
	opacity: 1
	}

	.pkg-featured {
	background: rgba(200, 240, 78, .07) !important;
	border-color: rgba(200, 240, 78, .28) !important
	}

	.pkg-featured::before {
	opacity: 1 !important
	}

	.pkg-badge {
	display: inline-block;
	background: rgba(255, 255, 255, .09);
	color: rgba(255, 255, 255, .55);
	font-size: .7rem;
	font-weight: 700;
	padding: .26rem .8rem;
	border-radius: 50px;
	margin-bottom: 1rem;
	letter-spacing: .4px
	}

	.pkg-badge.feat {
	background: var(--accent);
	color: var(--p)
	}

	.pkg-name {
	font-size: 1.2rem;
	font-weight: 900;
	color: var(--white);
	margin-bottom: .2rem
	}

	.pkg-en {
	font-size: .76rem;
	color: rgba(255, 255, 255, .32);
	margin-bottom: 1rem
	}

	.pkg-price {
	font-size: 1.9rem;
	font-weight: 900;
	color: var(--accent);
	line-height: 1;
	margin-bottom: 1.3rem
	}

	.pkg-price sup {
	font-size: .9rem;
	vertical-align: super
	}

	.pkg-price span {
	font-size: .9rem;
	color: rgba(255, 255, 255, .32);
	font-weight: 400
	}

	.pkg-div {
	height: 1px;
	background: rgba(255, 255, 255, .07);
	margin-bottom: 1.3rem
	}

	.pkg-engines {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
	margin-bottom: 1.1rem
	}

	.pkg-eng-tag {
	font-size: .63rem;
	font-weight: 800;
	background: rgba(255, 255, 255, .07);
	color: rgba(255, 255, 255, .55);
	padding: .18rem .58rem;
	border-radius: 50px;
	border: 1px solid rgba(255, 255, 255, .1)
	}

	.pkg-eng-tag.on {
	background: rgba(200, 240, 78, .12);
	color: var(--accent);
	border-color: rgba(200, 240, 78, .25)
	}

	.pkg-features {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .6rem
	}

	.pkg-features li {
	font-size: .86rem;
	color: rgba(255, 255, 255, .65);
	display: flex;
	align-items: center;
	gap: .5rem
	}

	.pkg-features li::before {
	content: '✓';
	color: var(--accent);
	font-weight: 900;
	font-size: .8rem;
	flex-shrink: 0
	}

	.pkg-cta {
	display: block;
	text-align: center;
	margin-top: 1.7rem;
	padding: .78rem;
	border-radius: 13px;
	font-family: 'Cairo', sans-serif;
	font-weight: 800;
	font-size: .9rem;
	cursor: pointer;
	text-decoration: none;
	border: 1.5px solid rgba(255, 255, 255, .18);
	color: var(--white);
	background: transparent;
	transition: all .2s
	}

	.pkg-cta:hover {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .35)
	}

	.pkg-cta-feat {
	background: var(--accent) !important;
	color: var(--p) !important;
	border-color: var(--accent) !important
	}

	.pkg-cta-feat:hover {
	transform: scale(1.03);
	box-shadow: 0 8px 28px rgba(200, 240, 78, .3)
	}

	/* ══ AUDIT SECTION ══ */
	.audit-section {
	background: var(--p-dark)
	}

	.audit-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5rem;
	align-items: center
	}

	.audit-checks {
	display: flex;
	flex-direction: column;
	gap: .65rem;
	margin-top: 1.7rem
	}

	.ach {
	display: flex;
	align-items: center;
	gap: .85rem;
	background: var(--card-bg);
	border: 1px solid var(--border-dark);
	border-radius: 13px;
	padding: 1rem 1.3rem;
	transition: transform .2s, box-shadow .2s
	}

	.ach:hover {
	transform: translateX(-3px);
	box-shadow: 0 4px 18px rgba(15, 66, 70, .07)
	}

	.ach-icon {
	width: 36px;
	height: 36px;
	background: rgba(15, 66, 70, .06);
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	flex-shrink: 0
	}

	.ach-text {
	font-size: .88rem;
	font-weight: 600;
	color: var(--white)
	}

	.audit-form {
	background: var(--card-bg);
	border: 1px solid var(--border-dark);
	border-radius: 22px;
	padding: 2.3rem
	}

	.audit-form h3 {
	font-size: 1.3rem;
	font-weight: 900;
	color: var(--white);
	margin-bottom: .4rem
	}

	.audit-form p {
	font-size: .86rem;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 1.6rem
	}

	.fsteps {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 1.4rem;
	overflow: hidden;
	border-radius: 11px;
	border: 1px solid var(--border-dark)
	}

	.fstep {
	flex: 1;
	padding: .62rem .4rem;
	text-align: center;
	font-size: .7rem;
	font-weight: 700;
	color: var(--gray);
	border-left: 1px solid var(--border-dark);
	background: var(--card-bg);
	transition: all .3s
	}

	.fstep:first-child {
	border-left: none
	}

	.fstep.active {
	background: var(--p);
	color: var(--white)
	}

	.fstep.done {
	background: rgba(15, 66, 70, .06);
	color: var(--white)
	}

	.fg {
	margin-bottom: 1rem
	}

	.fg label {
	display: block;
	font-size: .77rem;
	font-weight: 700;
	color: var(--white);
	margin-bottom: .42rem
	}

	.fg input,
	.fg select {
	width: 100%;
	background: rgba(255, 255, 255, .05);
	border: 1.5px solid var(--border-dark);
	border-radius: 11px;
	padding: .78rem 1.1rem;
	font-family: 'Cairo', sans-serif;
	font-size: .9rem;
	color: var(--white);
	transition: border-color .2s;
	outline: none;
	direction: rtl
	}

	.fg input:focus,
	.fg select:focus {
	border-color: var(--accent);
	background: rgba(255, 255, 255, .08)
	}

	.fg input::placeholder {
	color: rgba(255, 255, 255, .3)
	}

	.fg select option {
	background: var(--p-dark);
	color: var(--white)
	}

	.rp {
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--border-dark);
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 1.3rem;
	box-shadow: 0 6px 24px rgba(15, 66, 70, .07)
	}

	.rp-hd {
	background: var(--p);
	padding: 1rem 1.4rem;
	display: flex;
	align-items: center;
	gap: .65rem
	}

	.rp-logo-dot {
	width: 5px;
	height: 5px;
	background: var(--accent);
	border-radius: 50%
	}

	.rp-logo {
	font-size: .93rem;
	font-weight: 900;
	color: var(--white);
	letter-spacing: -.5px
	}

	.rp-title {
	font-size: .72rem;
	color: rgba(255, 255, 255, .42);
	margin-right: auto
	}

	.rp-badge {
	font-size: .6rem;
	font-weight: 800;
	background: var(--accent);
	color: var(--p);
	padding: .16rem .52rem;
	border-radius: 50px
	}

	.rp-body {
	padding: 1.1rem 1.4rem
	}

	.rp-score-row {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin-bottom: .85rem
	}

	.rp-circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(15, 66, 70, .06);
	border: 3px solid var(--p);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .93rem;
	font-weight: 900;
	color: var(--p);
	flex-shrink: 0
	}

	.rp-info h4 {
	font-size: .83rem;
	font-weight: 800;
	color: var(--white)
	}

	.rp-info p {
	font-size: .72rem;
	color: var(--gray);
	margin-top: .15rem
	}

	.rp-checks {
	display: flex;
	flex-direction: column;
	gap: .42rem
	}

	.rpck {
	display: flex;
	align-items: center;
	gap: .52rem;
	font-size: .74rem;
	padding: .36rem .52rem;
	border-radius: 7px;
	background: rgba(15, 66, 70, .03)
	}

	.rpck-icon {
	font-size: .78rem
	}

	.rpck-lbl {
	flex: 1;
	color: var(--white);
	font-weight: 500
	}

	.rpck-val {
	font-size: .66rem;
	font-weight: 800;
	padding: .1rem .42rem;
	border-radius: 50px
	}

	.rpck-val.bad {
	background: rgba(220, 50, 50, .08);
	color: #ff8888
	}

	.rpck-val.ok {
	background: rgba(200, 240, 78, .13);
	color: #5a7a00
	}

	/* ══ SECTION BASE ══ */
	section {
	padding: 7rem 5vw
	}

	.container {
	max-width: 1200px;
	margin: 0 auto
	}

	.s-tag {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	margin-bottom: .85rem;
	color: var(--accent)
	}

	.s-tag::before {
	content: '';
	width: 16px;
	height: 2px;
	background: var(--accent);
	border-radius: 2px;
	flex-shrink: 0
	}

	.s-tag-w {
	color: var(--accent) !important
	}

	.s-tag-w::before {
	background: var(--accent) !important
	}

	h2.sh {
	font-size: clamp(1.85rem, 3.2vw, 2.75rem);
	font-weight: 900;
	line-height: 1.2;
	max-width: 680px;
	color: var(--white)
	}

	h2.sh span {
	color: var(--accent)
	}

	h2.sh-w {
	color: var(--white) !important
	}

	h2.sh-w span {
	color: var(--accent) !important
	}

	.sd {
	font-size: .98rem;
	line-height: 1.9;
	max-width: 560px;
	margin-top: .85rem;
	color: rgba(255, 255, 255, .5)
	}

	.sd-w {
	color: rgba(255, 255, 255, .5) !important
	}

	.s-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 2rem;
	margin-bottom: 3.5rem
	}

	/* ══ FOOTER ══ */
	footer {
	background: var(--p-dark);
	color: rgba(255, 255, 255, .42);
	padding: 4rem 5vw 2.5rem;
	border-top: 1px solid rgba(255, 255, 255, .06)
	}

	.footer-inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 3rem;
	margin-bottom: 3rem;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto
	}

	.footer-brand .logo {
	color: var(--white);
	margin-bottom: .85rem
	}

	.footer-brand p {
	font-size: .83rem;
	line-height: 1.8
	}

	.footer-col h4 {
	font-size: .78rem;
	font-weight: 800;
	color: var(--white);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 1rem
	}

	.footer-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .5rem
	}

	.footer-col ul a {
	color: rgba(255, 255, 255, .35);
	text-decoration: none;
	font-size: .83rem;
	transition: color .2s
	}

	.footer-col ul a:hover {
	color: var(--white)
	}

	.footer-btm {
	max-width: 1200px;
	margin: 0 auto;
	border-top: 1px solid rgba(255, 255, 255, .06);
	padding-top: 1.4rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: .85rem
	}

	.footer-btm span {
	font-size: .76rem
	}

	/* WhatsApp */
	.wa {
	position: fixed;
	bottom: 2rem;
	left: 2rem;
	z-index: 300;
	width: 54px;
	height: 54px;
	background: #25D366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px rgba(37, 211, 102, .35);
	cursor: pointer;
	transition: transform .2s, box-shadow .2s;
	text-decoration: none
	}

	.wa:hover {
	transform: scale(1.1);
	box-shadow: 0 12px 30px rgba(37, 211, 102, .45)
	}

	.wa svg {
	width: 26px;
	height: 26px;
	fill: white
	}

	.wa-pulse {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50%;
	background: #25D366;
	animation: wap 2.5s ease-out infinite
	}

	/* ══ ANIMATIONS ══ */
	@keyframes fadeUp {
	from {
	opacity: 0;
	transform: translateY(26px)
	}

	to {
	opacity: 1;
	transform: translateY(0)
	}
	}

	@keyframes blink {

	0%,
	100% {
	opacity: 1
	}

	50% {
	opacity: .2
	}
	}

	@keyframes wap {
	0% {
	transform: scale(1);
	opacity: .6
	}

	100% {
	transform: scale(1.7);
	opacity: 0
	}
	}

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

	.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s, transform .7s
	}

	.reveal.visible {
	opacity: 1;
	transform: translateY(0)
	}

	.rd1 {
	transition-delay: .12s
	}

	.rd2 {
	transition-delay: .24s
	}

	.rd3 {
	transition-delay: .36s
	}

	.rd4 {
	transition-delay: .48s
	}

	/* ══ RESPONSIVE ══ */
	@media(max-width:1200px) {
	.tools-grid,
	.tools-grid-btm {
	grid-template-columns: repeat(3, 1fr)
	}
	}

	@media(max-width:900px) {
	.tools-grid,
	.tools-grid-btm {
	grid-template-columns: repeat(2, 1fr)
	}
	}

	@media(max-width:660px) {
	.tools-grid,
	.tools-grid-btm {
	grid-template-columns: 1fr
	}
	}

	@media(max-width:1000px) {
	.hero-inner {
	grid-template-columns: 1fr;
	gap: 3rem
	}

	.hero-visual {
	order: -1
	}

	.hero-sub,
	.hero-supporting {
	margin-left: auto;
	margin-right: auto
	}

	.hero-ctas {
	justify-content: center
	}

	.hv-metrics {
	grid-template-columns: 1fr 1fr
	}
	}

	@media(max-width:900px) {
	.audit-inner {
	grid-template-columns: 1fr
	}

	.footer-inner {
	grid-template-columns: 1fr 1fr
	}

	.journey-flow,
	.engines-flow {
	flex-wrap: wrap
	}

	.j-step,
	.e-card {
	flex: 0 0 calc(50% - 1rem)
	}

	.j-arrow,
	.e-arrow {
	display: none
	}

	.journey-track,
	.engines-track,
	.journey-track-dot,
	.engines-track-dot {
	display: none
	}

	.comparison-block {
	grid-template-columns: 1fr
	}
	}

	@media(max-width:660px) {
	.nav-links {
	display: none
	}

	.footer-inner {
	grid-template-columns: 1fr
	}

	.tools-grid {
	grid-template-columns: 1fr
	}

	.j-step,
	.e-card {
	flex: 0 0 100%
	}

	.hero-stats {
	flex-wrap: wrap
	}

	.hstat {
	flex: 0 0 calc(50% - 1px);
	border-bottom: 1px solid rgba(255, 255, 255, .08)
	}

	.hero-visual {
	display: none
	}

	.comparison-block {
	grid-template-columns: 1fr
	}

	.hv-metrics {
	grid-template-columns: 1fr
	}
	}
	</style>
	</head>

	<body>

	<!-- NAV -->
	<nav id="main-nav">
	<a class="logo" href="#"><span class="logo-dot"></span>محرك</a>
	<ul class="nav-links">
	<li><a href="#system">النظام</a></li>
	<li><a href="#tools">الأدوات</a></li>
	<li><a href="#packages">الباقات</a></li>
	<li><a href="#faq">الأسئلة الشائعة</a></li>
	<li><a href="/login.html" class="nav-cta" onclick="handleSignupClick(event)">تسجيل</a></li>
	</ul>
	</nav>

	<!-- ══════════════════════════════════
	SECTION 1 — HERO
	══════════════════════════════════ -->
	<section class="hero">
	<div class="hero-bg-grid"></div>
	<div class="hero-lines">
	<div class="hero-line hl1"></div>
	<div class="hero-line hl2"></div>
	<div class="hero-line hl3"></div>
	</div>

	<div class="hero-inner">
	<!-- Left: Text -->
	<div class="hero-text">
	<div class="hero-eyebrow"><span class="eyebrow-pulse"></span>Search Growth System — 5 Engines</div>

	<h1>
	<span class="hero-headline-pre">الخيار الأقوى:</span>
	نظام يضمن أنك<br>الإجابة الأولى في <span class="glow-word">كل مكان</span> يبحث فيه عميلك
	</h1>

	<p class="hero-sub">
	5 محركات متكاملة تغطي كل نقطة تماس بين عميلك والإنترنت — من TikTok إلى ChatGPT إلى Google… وحتى لحظة الشراء
	</p>

	<div class="hero-supporting">
	مش SEO… ده نظام يتحكم في كيف يكتشفك العميل ويثق بك ويختارك
	</div>

	<div class="hero-ctas">
	<a href="#audit" class="btn-primary"> ابدأ تدقيق مجاني</a>
	<a href="#system" class="btn-ghost"> شوف النظام شغال إزاي</a>
	</div>

	<div class="hero-stats">
	<div class="hstat">
	<span class="hstat-val">48h</span>
	<span class="hstat-lbl">وقت الإعداد</span>
	</div>
	<div class="hstat">
	<span class="hstat-val">+320%</span>
	<span class="hstat-lbl">نمو العملاء</span>
	</div>
	<div class="hstat">
	<span class="hstat-val">📈</span>
	<span class="hstat-lbl">Leads يوميًا</span>
	</div>
	</div>
	</div>

	<!-- Right: Glassmorphism UI Box -->
	<div class="hero-visual">
	<div class="hv-card">
	<div class="hv-label">
	<span class="hv-label-left">Search Growth System — Live</span>
	<span class="hv-live-badge">LIVE</span>
	</div>

	<div class="hv-engines">
	<div class="hv-eng" style="--eng-color:#5fd4dc">
	<span class="hv-eng-dot" style="background:#5fd4dc;color:#5fd4dc"></span>
	<span class="hv-eng-icon"><i class="fas fa-search-plus"></i></span>
	<div class="hv-eng-info">
	<span class="hv-eng-name">SEO Engine</span>
	<span class="hv-eng-sub">Search Optimization</span>
	</div>
	<span class="hv-eng-status s-teal">Rank #1</span>
	</div>
	<div class="hv-eng" style="--eng-color:#74c365">
	<span class="hv-eng-dot" style="background:#74c365;color:#74c365"></span>
	<span class="hv-eng-icon"><i class="fas fa-brain"></i></span>
	<div class="hv-eng-info">
	<span class="hv-eng-name">AI Visibility</span>
	<span class="hv-eng-sub">ChatGPT · Gemini</span>
	</div>
	<span class="hv-eng-status s-green">Active</span>
	</div>
	<div class="hv-eng" style="--eng-color:var(--accent)">
	<span class="hv-eng-dot" style="background:var(--accent);color:var(--accent)"></span>
	<span class="hv-eng-icon"><i class="fas fa-bullseye"></i></span>
	<div class="hv-eng-info">
	<span class="hv-eng-name">Ads Engine</span>
	<span class="hv-eng-sub">Google Ads · Funnel</span>
	</div>
	<span class="hv-eng-status s-green">ROI 320%</span>
	</div>
	<div class="hv-eng" style="--eng-color:#9370db">
	<span class="hv-eng-dot" style="background:#9370db;color:#9370db"></span>
	<span class="hv-eng-icon"><i class="fas fa-pen-fancy"></i></span>
	<div class="hv-eng-info">
	<span class="hv-eng-name">Content Engine</span>
	<span class="hv-eng-sub">TikTok · Instagram</span>
	</div>
	<span class="hv-eng-status s-purple">12 Posts / Month</span>
	</div>
	<div class="hv-eng" style="--eng-color:#fbbf24">
	<span class="hv-eng-dot" style="background:#fbbf24;color:#fbbf24"></span>
	<span class="hv-eng-icon"><i class="fas fa-shield-halved"></i></span>
	<div class="hv-eng-info">
	<span class="hv-eng-name">Trust Engine</span>
	<span class="hv-eng-sub">Reviews · Reputation</span>
	</div>
	<span class="hv-eng-status s-yellow">4.9★ Rating</span>
	</div>
	</div>

	<div class="hv-metrics">
	<div class="hv-m"><span class="hv-m-val">48h</span><span class="hv-m-lbl">Setup</span></div>
	<div class="hv-m"><span class="hv-m-val">+320%</span><span class="hv-m-lbl">Growth</span></div>
	<div class="hv-m"><span class="hv-m-val">📈</span><span class="hv-m-lbl">Leads Daily</span></div>
	</div>

	<div class="hv-journey">
	<div class="hv-journey-label">رحلة العميل الكاملة</div>
	<div class="hv-journey-row">
	<div class="hv-j-item">
	<div class="hv-j-icon"><i class="fab fa-tiktok"></i></div>
	<span class="hv-j-lbl">TikTok</span>
	</div>
	<span class="hv-j-arrow"><i class="fas fa-chevron-left"></i></span>
	<div class="hv-j-item">
	<div class="hv-j-icon"><i class="fas fa-robot"></i></div>
	<span class="hv-j-lbl">AI Search</span>
	</div>
	<span class="hv-j-arrow"><i class="fas fa-chevron-left"></i></span>
	<div class="hv-j-item">
	<div class="hv-j-icon"><i class="fas fa-magnifying-glass"></i></div>
	<span class="hv-j-lbl">Google</span>
	</div>
	<span class="hv-j-arrow"><i class="fas fa-chevron-left"></i></span>
	<div class="hv-j-item">
	<div class="hv-j-icon"><i class="fas fa-star"></i></div>
	<span class="hv-j-lbl">Reviews</span>
	</div>
	<span class="hv-j-arrow"><i class="fas fa-chevron-left"></i></span>
	<div class="hv-j-item">
	<div class="hv-j-icon"><i class="fas fa-check-double"></i></div>
	<span class="hv-j-lbl">شراء</span>
	</div>
	</div>
	</div>

	</div>
	</div>
	</div>
	</section>

	<!-- ══════════════════════════════════
	SECTION 2 — CUSTOMER JOURNEY
	══════════════════════════════════ -->
	<section class="journey-section" id="journey">
	<div class="journey-bg-dots"></div>
	<div class="journey-inner">

	<div class="journey-header reveal">
	<div class="journey-tag">رحلة العميل</div>
	<h2>
	عميلك لا يبحث في مكان واحد…<br>
	بل يمر <span class="accent-text">برحلة كاملة</span> قبل أن يصل إليك
	</h2>
	<p class="journey-sub">
	كل قرار شراء يمر بعدة محطات —<br>
	وفي كل محطة… هناك من يكسب ثقة العميل قبلك
	</p>
	<div class="journey-supporting">
	المشكلة ليست في خدمتك… المشكلة أنك لا تظهر في اللحظة التي يبحث فيها العميل
	</div>
	</div>

	<div class="journey-flow-wrap reveal rd1">
	<div class="journey-track"></div>
	<div class="journey-track-dot"></div>

	<div class="journey-flow">
	<div class="j-step">
	<div class="j-icon-wrap">
	<div class="j-step-num">01</div>
	<i class="fas fa-eye"></i>
	</div>
	<div class="j-step-card">
	<div class="j-title">الاكتشاف</div>
	<div class="j-desc">يرى محتوى أو إعلان لأول مرة</div>
	<div class="j-platforms">
	<span class="j-tag">TikTok</span>
	<span class="j-tag">Instagram</span>
	<span class="j-tag">YouTube</span>
	</div>
	</div>
	</div>

	<div class="j-arrow">←</div>

	<div class="j-step">
	<div class="j-icon-wrap">
	<div class="j-step-num">02</div>
	<i class="fas fa-robot"></i>
	</div>
	<div class="j-step-card">
	<div class="j-title">البحث الذكي</div>
	<div class="j-desc">يسأل: "أفضل شركة / خدمة…؟"</div>
	<div class="j-platforms">
	<span class="j-tag">ChatGPT</span>
	<span class="j-tag">Gemini</span>
	<span class="j-tag">Perplexity</span>
	</div>
	</div>
	</div>

	<div class="j-arrow">←</div>

	<div class="j-step active">
	<div class="j-icon-wrap">
	<div class="j-step-num">03</div>
	<i class="fas fa-search"></i>
	</div>
	<div class="j-step-card">
	<div class="j-title">البحث التقليدي</div>
	<div class="j-desc">يدخل Google ويقارن النتائج</div>
	<div class="j-platforms">
	<span class="j-tag">Google</span>
	<span class="j-tag">Maps</span>
	<span class="j-tag">Bing</span>
	</div>
	</div>
	</div>

	<div class="j-arrow">←</div>

	<div class="j-step">
	<div class="j-icon-wrap">
	<div class="j-step-num">04</div>
	<i class="fas fa-star"></i>
	</div>
	<div class="j-step-card">
	<div class="j-title">الثقة</div>
	<div class="j-desc">يشاهد التقييمات والآراء</div>
	<div class="j-platforms">
	<span class="j-tag">Reviews</span>
	<span class="j-tag">Social Proof</span>
	<span class="j-tag">Authority</span>
	</div>
	</div>
	</div>

	<div class="j-arrow">←</div>

	<div class="j-step">
	<div class="j-icon-wrap">
	<div class="j-step-num">05</div>
	<i class="fas fa-circle-check"></i>
	</div>
	<div class="j-step-card">
	<div class="j-title">القرار</div>
	<div class="j-desc">يتواصل أو يشتري</div>
	<div class="j-platforms">
	<span class="j-tag">Call</span>
	<span class="j-tag">Book</span>
	<span class="j-tag">Buy</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="journey-punchline reveal rd2">
	<p>
	إذا لم تكن موجودًا في <strong>كل خطوة</strong>…<br>
	فالعميل سيكمل رحلته مع <strong>منافسك</strong>
	</p>
	</div>

	</div>
	</section>

	<!-- ══════════════════════════════════
	SECTION 3 — THE SYSTEM
	══════════════════════════════════ -->
	<section class="system-section" id="system">
	<div class="system-grid"></div>
	<div class="system-inner">

	<div class="system-header reveal">
	<div class="system-tag">الحل — النظام</div>
	<h2>
	نظام واحد… يغطي <span class="accent-text">رحلة عميلك بالكامل</span>
	</h2>
	<p class="system-sub">
	5 محركات تعمل معًا لضمان ظهورك في كل لحظة يبحث فيها العميل —<br>
	من أول اكتشاف… حتى قرار الشراء
	</p>
	<div class="system-supporting">
	بدل ما تشتغل على قنوات منفصلة… محرك تبني نظام متكامل يجلب لك عملاء باستمرار
	</div>
	</div>

	<div class="system-preline reveal rd1">
	<strong>كل مرحلة</strong> في رحلة العميل تحتاج محرك خاص…
	ونحن نوفر لك <strong>الخمسة في نظام واحد</strong> <i class="fas fa-gears"></i>
	</div>

	<div class="engines-flow-wrap reveal rd2">
	<div class="engines-track"></div>
	<div class="engines-track-dot"></div>

	<div class="engines-flow">
	<div class="e-card">
	<div class="e-icon-wrap">
	<div class="e-card-num">01</div>
	<i class="fas fa-pen-nib"></i>
	</div>
	<div class="e-card-body">
	<span class="e-badge">Engine 01</span>
	<div class="e-name">Content Engine</div>
	<div class="e-desc">يجلب لك الانتباه من أول لحظة — ينشئ محتوى يبدأ معه العميل بمعرفتك</div>
	<div class="e-platforms">
	<span class="e-tag">TikTok</span>
	<span class="e-tag">Instagram</span>
	<span class="e-tag">YouTube</span>
	</div>
	</div>
	</div>

	<div class="e-arrow">←</div>

	<div class="e-card active">
	<div class="e-icon-wrap">
	<div class="e-card-num">02</div>
	<i class="fas fa-robot"></i>
	</div>
	<div class="e-card-body">
	<span class="e-badge">Engine 02</span>
	<div class="e-name">AI Visibility Engine</div>
	<div class="e-desc">يجعلك الإجابة عندما يسأل العميل عن "أفضل خيار"</div>
	<div class="e-platforms">
	<span class="e-tag">ChatGPT</span>
	<span class="e-tag">Gemini</span>
	<span class="e-tag">AI Tools</span>
	</div>
	</div>
	</div>

	<div class="e-arrow">←</div>

	<div class="e-card">
	<div class="e-icon-wrap">
	<div class="e-card-num">03</div>
	<i class="fas fa-chart-line"></i>
	</div>
	<div class="e-card-body">
	<span class="e-badge">Engine 03</span>
	<div class="e-name">SEO Engine</div>
	<div class="e-desc">يضعك في مقدمة نتائج البحث عند البحث الفعلي عن الخدمة</div>
	<div class="e-platforms">
	<span class="e-tag">Google</span>
	<span class="e-tag">Maps</span>
	<span class="e-tag">Bing</span>
	</div>
	</div>
	</div>

	<div class="e-arrow">←</div>

	<div class="e-card">
	<div class="e-icon-wrap">
	<div class="e-card-num">04</div>
	<i class="fas fa-star"></i>
	</div>
	<div class="e-card-body">
	<span class="e-badge">Engine 04</span>
	<div class="e-name">Trust Engine</div>
	<div class="e-desc">يبني ثقة العميل قبل القرار — ليختارك باطمئنان</div>
	<div class="e-platforms">
	<span class="e-tag">Reviews</span>
	<span class="e-tag">Reputation</span>
	<span class="e-tag">Media</span>
	</div>
	</div>
	</div>

	<div class="e-arrow">←</div>

	<div class="e-card">
	<div class="e-icon-wrap">
	<div class="e-card-num">05</div>
	<i class="fas fa-bullseye"></i>
	</div>
	<div class="e-card-body">
	<span class="e-badge">Engine 05</span>
	<div class="e-name">Ads & Conversion Engine</div>
	<div class="e-desc">يحول الاهتمام إلى عملاء — تحويل الزيارات لمبيعات</div>
	<div class="e-platforms">
	<span class="e-tag">Google Ads</span>
	<span class="e-tag">Funnel</span>
	<span class="e-tag">CRO</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="system-punchline reveal rd3">
	<p>
	كل محرك وحده <strong>لا يكفي</strong>…<br>
	لكن معًا يصنعون <strong>نظامًا يجلب العملاء باستمرار</strong>
	</p>
	</div>

	<div class="comparison-block reveal">
	<div class="comp-card without">
	<div class="comp-title"><i class="fas fa-circle-xmark"></i> بدون نظام المهيمن</div>
	<ul class="comp-list">
	<li class="comp-item"><span class="comp-icon"><i class="fas fa-xmark"></i></span>تظهر في Google فقط</li>
	<li class="comp-item"><span class="comp-icon">✗</span>لا تظهر في محركات الـ AI</li>
	<li class="comp-item"><span class="comp-icon">✗</span>تقييمات ضعيفة أو غير موجودة</li>
	<li class="comp-item"><span class="comp-icon">✗</span>تحويل ضعيف للزيارات لمبيعات</li>
	</ul>
	</div>
	<div class="comp-card with">
	<div class="comp-title"><i class="fas fa-circle-check"></i> مع محرك</div>
	<ul class="comp-list">
	<li class="comp-item"><span class="comp-icon"><i class="fas fa-check"></i></span>ظهور في كل مكان يبحث فيه
	العميل</li>
	<li class="comp-item"><span class="comp-icon"><i class="fas fa-check"></i></span>ثقة عالية ومصداقية رقمية
	</li>
	<li class="comp-item"><span class="comp-icon"><i class="fas fa-check"></i></span>تدفق عملاء مستمر ومقيس</li>
	<li class="comp-item"><span class="comp-icon"><i class="fas fa-check"></i></span>نمو قابل للتتبع والتحسين
	</li>
	</ul>
	</div>
	</div>

	<div class="system-closing reveal">
	<p>
	وهذا ما يجعل النتائج ليست مجرد <strong>ظهور</strong>…<br>
	بل <strong>عملاء حقيقيين</strong> و<strong>نمو قابل للقياس</strong>
	</p>
	</div>

	</div>
	</section>

	<!-- ══ TOOLS ══ -->
	<section class="tools-section" id="tools">
	<div class="container">
	<div class="s-head reveal">
	<div>
	<span class="s-tag s-tag-w">ترسانة الأدوات الذكية</span>
	<h2 class="sh sh-w">كل أداة بتحل <span>مشكلة حقيقية</span> في نموك</h2>
	<p class="sd sd-w">أدواتنا مدمجة في النظام — تشتغل مع بعض لتغطي كل جانب من جوانب ظهورك الرقمي.</p>
	</div>
	</div>
	<div class="tools-grid">
	<div class="tc reveal">
	<div class="tc-status">
	<div class="tc-dot"></div><span class="tc-stat-text">متاح</span>
	</div>
	<div class="tc-icon ic-teal"><i class="fas fa-globe"></i></div>
	<div class="tc-name">تحليل SEO + GEO الشامل</div>
	<div class="tc-desc">نزحف موقعك بالكامل ونكشف ثغرات SEO التقليدي ومدى ظهورك في ChatGPT وGemini — تقرير واحد يجمع كل شيء.</div>
	<a href="#audit" class="tc-btn">ابدأ التحليل <span class="tc-btn-arr">←</span></a>
	</div>
	<div class="tc reveal rd1">
	<div class="tc-status">
	<div class="tc-dot"></div><span class="tc-stat-text">متاح</span>
	</div>
	<div class="tc-icon ic-blue"><i class="fas fa-search"></i></div>
	<div class="tc-name">بحث الكلمات المفتاحية</div>
	<div class="tc-desc">اكتشف الكلمات التي يبحث عنها عملاؤك فعلاً — حجم البحث، المنافسة، وفرص الظهور في نتائج AI قبل منافسيك.</div>
	<a href="#audit" class="tc-btn">استكشف الكلمات <span class="tc-btn-arr">←</span></a>
	</div>
	<div class="tc reveal rd2">
	<div class="tc-status">
	<div class="tc-dot"></div><span class="tc-stat-text">متاح</span>
	</div>
	<div class="tc-icon ic-green"><i class="fas fa-square-check"></i></div>
	<div class="tc-name">محرك البحث الذكي</div>
	<div class="tc-desc">محرك بحث ذكي مدعوم بـ Tavily API يوفر إجابات دقيقة ومحدّثة حول أي موضوع، مع مصادر موثوقة وتحليل عميق.</div>
	<a href="#audit" class="tc-btn">ابدأ الآن <span class="tc-btn-arr">←</span></a>
	</div>
	<div class="tc reveal rd3">
	<div class="tc-status">
	<div class="tc-dot"></div><span class="tc-stat-text">متاح</span>
	</div>
	<div class="tc-icon ic-purple"><i class="fas fa-file-pen"></i></div>
	<div class="tc-name">محتوى يُصنّف ويُقنع</div>
	<div class="tc-desc">فريقنا يكتب لك محتوى مهيأً لـ Google وAI في آن واحد — مقالات، صفحات خدمات، ووصف منتجات يحوّل الزوار إلى عملاء.</div>
	<a href="#audit" class="tc-btn">أنشئ محتوى <span class="tc-btn-arr">←</span></a>
	</div>
	</div>
	<div class="tools-grid">
	<div class="tc reveal">
	<div class="tc-status">
	<div class="tc-dot"></div><span class="tc-stat-text">متاح</span>
	</div>
	<div class="tc-icon ic-orange"><i class="fas fa-location-crosshairs"></i></div>
	<div class="tc-name">الهيمنة الإقليمية</div>
	<div class="tc-desc">السعودية، مصر، الإمارات، المغرب — حلّل ظهورك في كل سوق على حدة واكتشف فرص نمو لم تكن تعرف أنها موجودة.</div>
	<a href="#audit" class="tc-btn">توسع إقليمياً <span class="tc-btn-arr">←</span></a>
	</div>
	<div class="tc reveal rd1">
	<div class="tc-status">
	<div class="tc-dot"></div><span class="tc-stat-text">برو</span><span class="tc-badge badge-pro">PRO</span>
	</div>
	<div class="tc-icon ic-red"><i class="fas fa-users-viewfinder"></i></div>
	<div class="tc-name">تحليل المنافسين بعمق</div>
	<div class="tc-desc">اعرف بالضبط لماذا يظهر منافسوك قبلك في Google وAI — خذ أفكارهم وضعها في استراتيجية تتفوق عليهم.</div>
	<a href="#audit" class="tc-btn">تحليل المنافسين <span class="tc-btn-arr">←</span></a>
	</div>
	<div class="tc reveal rd2">
	<div class="tc-status">
	<div class="tc-dot"></div><span class="tc-stat-text">تجريبي</span><span class="tc-badge badge-new">جديد</span>
	</div>
	<div class="tc-icon ic-teal"><i class="fas fa-eye-low-vision"></i></div>
	<div class="tc-name">محاكي رؤية الذكاء الاصطناعي</div>
	<div class="tc-desc">شاهد كيف يفهم ChatGPT وGemini موقعك — اكتشف لماذا لا يذكرك AI وأصلح ذلك قبل أن يحصر منافسك التفوق.</div>
	<a href="#audit" class="tc-btn">جرّب المحاكاة <span class="tc-btn-arr">←</span></a>
	</div>
	<div class="tc reveal rd3">
	<div class="tc-status">
	<div class="tc-dot"></div><span class="tc-stat-text">متاح</span>
	</div>
	<div class="tc-icon ic-yellow"><i class="fas fa-chart-pie"></i></div>
	<div class="tc-name">خارطة طريق النمو</div>
	<div class="tc-desc">توصيات مرتبة حسب الأثر الفعلي — ليس قائمة مهام عشوائية، بل خطة نمو واضحة يضعها خبراؤنا خصيصاً لعملك.</div>
	<a href="#audit" class="tc-btn">احصل على خطتك <span class="tc-btn-arr">←</span></a>
	</div>
	</div>
	<div class="tools-grid-btm">
	<div class="tc reveal rd1">
	<div class="tc-status">
	<div class="tc-dot"></div><span class="tc-stat-text">متاح</span>
	</div>
	<div class="tc-icon ic-lime"><i class="fas fa-wand-magic-sparkles"></i></div>
	<div class="tc-name">ابدأ النمو اليوم — معنا</div>
	<div class="tc-desc">لسنا مجرد أداة — نحن فريقك. خبراؤنا جاهزون للانطلاق معك الآن، نضع الخطة وننفذها ونقيس النتائج معك.</div>
	<a href="#audit" class="tc-btn">تواصل مع الخبراء <span class="tc-btn-arr">←</span></a>
	</div>
	<div class="tc reveal rd2">
	<div class="tc-status">
	<div class="tc-dot"></div><span class="tc-stat-text">متاح</span>
	</div>
	<div class="tc-icon ic-pink"><i class="fas fa-arrow-trend-up"></i></div>
	<div class="tc-name">إعلانات تُحقق عائداً حقيقياً</div>
	<div class="tc-desc">ندير حملات Google Ads بذكاء — نربطها بنتائج SEO وGEO لتحصل على أقصى عائد من كل ريال تنفقه على الإعلان.</div>
	<a href="#packages" class="tc-btn">أطلق حملتك <span class="tc-btn-arr">←</span></a>
	</div>
	<div class="tc reveal rd3">
	<div class="tc-status">
	<div class="tc-dot"></div><span class="tc-stat-text">جديد</span><span class="tc-badge badge-new">جديد</span>
	</div>
	<div class="tc-icon ic-blue"><i class="fas fa-rocket"></i></div>
	<div class="tc-name">تسريع النمو الفوري</div>
	<div class="tc-desc">برنامج تسريع مكثف لمدة 30 يوم — نركز على أسرع طرق للظهور والحصول على عملاء جدد في أقصر وقت.</div>
	<a href="#audit" class="tc-btn">ابدأ الآن <span class="tc-btn-arr">←</span></a>
	</div>
	<div class="tc reveal rd4">
	<div class="tc-status">
	<div class="tc-dot"></div><span class="tc-stat-text">متاح</span>
	</div>
	<div class="tc-icon ic-green"><i class="fas fa-handshake"></i></div>
	<div class="tc-name">استشارة استراتيجية مجانية</div>
	<div class="tc-desc">جلسة 1:1 مع خبير نمو — نحلل وضعك الحالي ونضع لك خطة عمل مخصصة بناءً على أهدافك وميزانيتك.</div>
	<a href="#audit" class="tc-btn">احجز جلستك <span class="tc-btn-arr">←</span></a>
	</div>
	</div>
	</div>
	</section>

	<!-- ══ COMPARE ══ -->
	<section class="compare-section" id="compare">
	<div class="container">
	<div class="s-head reveal">
	<div>
	<span class="s-tag">المقارنة</span>
	<h2 class="sh">System <span>لا مجرد Service</span></h2>
	<p class="sd">شركات SEO تبيعك خدمة. محرك يبنيلك نظاماً من 5 محركات تشتغل مع بعض وتغطي كل رحلة العميل.</p>
	</div>
	</div>
	<div class="compare-wrap reveal rd1">
	<table class="ctable">
	<thead>
	<tr>
	<th style="min-width:200px">المعيار</th>
	<th class="cn">شركة SEO عادية</th>
	<th class="cm">محرك — 5 Engines</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><i class="fas fa-bullseye"></i> ما الذي يُقدَّم؟</td>
	<td class="cn">خدمة SEO شهرية</td>
	<td class="cm">نظام 5 محركات متكاملة</td>
	</tr>
	<tr>
	<td><i class="fas fa-chart-line"></i> SEO Engine</td>
	<td class="cn"><span class="ct-p"><i class="fas fa-minus"></i></span> أساسي</td>
	<td class="cm"><span class="ct-y"><i class="fas fa-check"></i></span> متقدم + محلي + تقني</td>
	</tr>
	<tr>
	<td><i class="fas fa-robot"></i> AI Visibility Engine</td>
	<td class="cn"><span class="ct-n"><i class="fas fa-xmark"></i></span></td>
	<td class="cm"><span class="ct-y"><i class="fas fa-check"></i></span> ChatGPT · Gemini · Perplexity</td>
	</tr>
	<tr>
	<td><i class="fas fa-bullseye"></i> Ads Engine</td>
	<td class="cn"><span class="ct-n"><i class="fas fa-xmark"></i></span></td>
	<td class="cm"><span class="ct-y"><i class="fas fa-check"></i></span> Smart tracking + CRO</td>
	</tr>
	<tr>
	<td><i class="fas fa-pen-nib"></i> Content Engine</td>
	<td class="cn"><span class="ct-p"><i class="fas fa-minus"></i></span> مقالات فقط</td>
	<td class="cm"><span class="ct-y"><i class="fas fa-check"></i></span> متعدد القنوات + استراتيجية</td>
	</tr>
	<tr>
	<td><i class="fas fa-star"></i> Trust Engine</td>
	<td class="cn"><span class="ct-n"><i class="fas fa-xmark"></i></span></td>
	<td class="cm"><span class="ct-y"><i class="fas fa-check"></i></span> Reviews + Authority + PR</td>
	</tr>
	<tr>
	<td><i class="fas fa-square-poll-vertical"></i> Dashboard حي</td>
	<td class="cn"><span class="ct-p"><i class="fas fa-minus"></i></span> تقرير PDF شهري</td>
	<td class="cm"><span class="ct-y"><i class="fas fa-check"></i></span> لحظي — كل Engine منفصل</td>
	</tr>
	<tr>
	<td><i class="fas fa-arrows-spin"></i> Funnel كامل</td>
	<td class="cn"><span class="ct-n"><i class="fas fa-xmark"></i></span></td>
	<td class="cm"><span class="ct-y"><i class="fas fa-check"></i></span></td>
	</tr>
	<tr>
	<td><i class="fas fa-bolt"></i> وقت الإطلاق</td>
	<td class="cn">2–4 أسابيع</td>
	<td class="cm">48 ساعة</td>
	</tr>
	<tr>
	<td><i class="fas fa-chart-line"></i> النتيجة المقيسة</td>
	<td class="cn">Clicks فقط</td>
	<td class="cm">Leads + Clients + Revenue</td>
	</tr>
	</tbody>
	</table>
	</div>
	<div class="compare-note reveal rd2">
	<span style="font-size:1.2rem"><i class="fas fa-lightbulb"></i></span>
	<span><strong>الخلاصة:</strong> شركات SEO تسألك "كم كلمة مفتاحية تريد؟" — محرك يسألك "كم عميل جديد تريد شهرياً؟"
	الفرق في النتيجة التي نقيسها.</span>
	</div>
	</div>
	</section>

	<!-- ══ CASE STUDIES ══ -->
	<section class="cases-section" id="case-studies">
	<div class="container">
	<div class="s-head reveal">
	<div>
	<span class="s-tag">نتائج حقيقية</span>
	<h2 class="sh">النتائج دي جاءت لأن <span>كل المحركات اشتغلت مع بعض</span></h2>
	<p class="sd">مش SEO بس — نظام الـ 5 محركات كامل. شوف أي محركات شغّلناهم لكل حالة.</p>
	</div>
	<a href="#audit" class="btn-primary" style="white-space:nowrap">اطلب نتائج مشابهة</a>
	</div>
	<div class="cases-grid">
	<div class="ccase reveal">
	<div class="ccase-hd">
	<div class="ccase-sector">عيادات طبية</div>
	<div class="ccase-title">مركز الابتسامة للأسنان</div>
	<div class="ccase-loc">الرياض، المملكة العربية السعودية</div>
	</div>
	<div class="ccase-engines">
	<span class="cce-lbl">Engines:</span>
	<span class="cce-tag">SEO</span><span class="cce-tag">AI Visibility</span><span class="cce-tag">Trust</span><span class="cce-tag">Ads</span>
	</div>
	<div class="ccase-metrics">
	<div class="ccase-m"><span class="ccase-mv up">+340%</span>
	<div class="ccase-ml">حجوزات جديدة</div>
	</div>
	<div class="ccase-m"><span class="ccase-mv up">#1</span>
	<div class="ccase-ml">Google الرياض</div>
	</div>
	<div class="ccase-m"><span class="ccase-mv">90</span>
	<div class="ccase-ml">يوم للنتيجة</div>
	</div>
	</div>
	<div class="ccase-body">
	<div class="ccase-ch-lbl">التحدي</div>
	<div class="ccase-ch">عيادة 5 سنوات غائبة في Google وAI — 90% من الحجوزات من إحالات شخصية فقط.</div>
	<div class="ccase-q">
	<p>"في أول شهر ارتفعت الحجوزات 40%، وفي الشهر الثالث وصلنا لـ 340% نمو."</p>
	<div class="ccase-q-name">د. محمد السالم — المدير الطبي</div>
	</div>
	</div>
	</div>
	<div class="ccase reveal rd1">
	<div class="ccase-hd" style="background:linear-gradient(135deg,#0F4246,#1a5a5e)">
	<div class="ccase-sector">مطاعم وF&B</div>
	<div class="ccase-title">مطعم كيف الشام</div>
	<div class="ccase-loc">القاهرة، مصر</div>
	</div>
	<div class="ccase-engines">
	<span class="cce-lbl">Engines:</span>
	<span class="cce-tag">SEO</span><span class="cce-tag">Trust</span><span class="cce-tag">Content</span>
	</div>
	<div class="ccase-metrics">
	<div class="ccase-m"><span class="ccase-mv up">+210%</span>
	<div class="ccase-ml">طلبات أونلاين</div>
	</div>
	<div class="ccase-m"><span class="ccase-mv up">4.8★</span>
	<div class="ccase-ml">من 3.2★</div>
	</div>
	<div class="ccase-m"><span class="ccase-mv">60</span>
	<div class="ccase-ml">يوم للنتيجة</div>
	</div>
	</div>
	<div class="ccase-body">
	<div class="ccase-ch-lbl">التحدي</div>
	<div class="ccase-ch">تقييمات سلبية تضر بالسمعة + منافسون يظهرون في Google Maps قبله.</div>
	<div class="ccase-q">
	<p>"تقييماتنا ارتفعت من 3.2 لـ 4.8 في شهرين. العملاء دلوقتي بيلاقونا قبل المنافسين."</p>
	<div class="ccase-q-name">أحمد حسن — صاحب المطعم</div>
	</div>
	</div>
	</div>
	<div class="ccase reveal rd2">
	<div class="ccase-hd" style="background:linear-gradient(135deg,#0a2e30,#0F4246)">
	<div class="ccase-sector">عقارات</div>
	<div class="ccase-title">شركة نخيل العقارية</div>
	<div class="ccase-loc">جدة، المملكة العربية السعودية</div>
	</div>
	<div class="ccase-engines">
	<span class="cce-lbl">Engines:</span>
	<span class="cce-tag">SEO</span><span class="cce-tag">Ads</span><span class="cce-tag">Content</span><span class="cce-tag">AI</span>
	</div>
	<div class="ccase-metrics">
	<div class="ccase-m"><span class="ccase-mv up">+180%</span>
	<div class="ccase-ml">استفسارات</div>
	</div>
	<div class="ccase-m"><span class="ccase-mv up">12x</span>
	<div class="ccase-ml">ROI إعلانات</div>
	</div>
	<div class="ccase-m"><span class="ccase-mv">120</span>
	<div class="ccase-ml">يوم للنتيجة</div>
	</div>
	</div>
	<div class="ccase-body">
	<div class="ccase-ch-lbl">التحدي</div>
	<div class="ccase-ch">30,000 ريال شهرياً على إعلانات بدون funnel — leads تيجي وتروح بدون متابعة.</div>
	<div class="ccase-q">
	<p>"محرك بنى لنا funnel متكامل وبقينا نحصّل 12 ريال عائد على كل ريال في الإعلانات."</p>
	<div class="ccase-q-name">خالد الزهراني — المدير التجاري</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- ══ PACKAGES ══ -->
	<section class="pkg-section" id="packages">
	<div class="container">
	<div class="s-head reveal">
	<div>
	<span class="s-tag s-tag-w">الباقات</span>
	<h2 class="sh sh-w">مقترح <span>باقات محرك</span></h2>
	<p class="sd sd-w">اختر الباقة المناسبة لأهدافك — من الأدوات المجانية إلى النظام المتكامل.</p>
	</div>
	</div>
	<div class="pkg-grid">
	<div class="pkg reveal">
	<div class="pkg-badge">مجاني</div>
	<div class="pkg-name">الباقة الأساسية</div>
	<div class="pkg-en">Basic Package</div>
	<div class="pkg-price">مجاني</div>
	<div class="pkg-div"></div>
	<p style="font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:1.2rem">ابدأ رحلة الظهور الرقمي؛ استكشف قوة أدواتنا الذكية لتحليل موقعك، اكتشاف الكلمات المفتاحية، ومحاكاة رؤية الذكاء الاصطناعي لموقعك مجاناً.</p>
	<ul class="pkg-features">
	<li>بحث الكلمات المفتاحية: اكتشف ما يبحث عنه عملاؤك فعلياً</li>
	<li>محرك البحث الذكي: إجابات دقيقة مدعومة بـ Tavily API</li>
	<li>محاكي رؤية AI: شاهد كيف يفهم ChatGPT وGemini موقعك</li>
	<li>تحليل الهيمنة الإقليمية: حلل ظهورك في السعودية ومصر والإمارات</li>
	<li>خارطة طريق النمو: توصيات مرتبة حسب الأثر الفعلي</li>
	<li>تدقيق تقني أساسي: فحص سرعة الموقع وأخطاء الأرشفة</li>
	</ul>
	<a href="#audit" class="pkg-cta">ابدأ الآن</a>
	</div>
	<div class="pkg pkg-featured reveal rd1">
	<div class="pkg-badge feat">الأكثر طلباً</div>
	<div class="pkg-name">الباقة الاحترافية</div>
	<div class="pkg-en">Professional Package</div>
	<div class="pkg-price">2,499 <span>ريال / شهر</span></div>
	<div class="pkg-div"></div>
	<p style="font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:1.2rem">السيطرة الكاملة على نتائج البحث؛ نجمع بين استراتيجيات SEO المتقدمة وتحسين الظهور في محركات الذكاء الاصطناعي لضمان تصدرك المشهد.</p>
	<ul class="pkg-features">
	<li>كل مميزات الباقة الأساسية</li>
	<li>SEO Engine: تهيئة كاملة للموقع (تقني، محلي، ومحتوى)</li>
	<li>AI Visibility Engine: استراتيجيات للظهور في ChatGPT وPerplexity</li>
	<li>Content Engine: كتابة محتوى مهيأ لـ Google وAI</li>
	<li>تحليل المنافسين بعمق: كشف استراتيجيات المنافسين</li>
	<li>لوحة بيانات حية: متابعة لحظية لكل محركات النمو</li>
	<li>متابعة أداء أسبوعية: تقارير مفصلة واجتماع دوري</li>
	</ul>
	<a href="#audit" class="pkg-cta pkg-cta-feat">ابدأ الآن</a>
	</div>
	<div class="pkg reveal rd2">
	<div class="pkg-badge">Enterprise</div>
	<div class="pkg-name">باقة التشغيل الكامل</div>
	<div class="pkg-en">Full Operation Package</div>
	<div class="pkg-price">حسب الطلب</div>
	<div class="pkg-div"></div>
	<p style="font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:1.2rem">نظام النمو المتكامل (5 Engines)؛ شريكك الاستراتيجي لإدارة كامل رحلة العميل، من الظهور الأول حتى تحويل الزوار إلى عملاء دائمين.</p>
	<ul class="pkg-features">
	<li>كل مميزات الباقة الاحترافية</li>
	<li>نظام الـ 5 محركات كاملاً: SEO + AI + Content + Trust + Ads</li>
	<li>Trust Engine: إدارة التقييمات وبناء السلطة والعلاقات العامة</li>
	<li>Ads Engine: إدارة حملات Google Ads مربوطة بنتائج SEO</li>
	<li>تحسين معدل التحويل (CRO): تحويل الزوار إلى Leads فعلية</li>
	<li>دعم فني وتقني متكامل: إدارة كاملة لأي تحديات تقنية</li>
	<li>مدير حساب مخصص: خبير SEO مخصص لمشروعك فقط</li>
	</ul>
	<a href="#audit" class="pkg-cta">تحدث مع فريقنا</a>
	</div>
	</div>
	</div>
	</section>

	<!-- ══ AUDIT ══ -->
	<section class="audit-section" id="audit">
	<div class="container">
	<div class="audit-inner">
	<div>
	<span class="s-tag">تدقيق مجاني</span>
	<h2 class="sh">اكتشف أيه المحركات <span>اللي بتخسرها دلوقتي</span></h2>
	<p class="sd">تقرير Search Growth Audit يكشف وضعك في كل محرك من المحركات الـ 5 — مقارنةً بالمنافسين.</p>
	<div class="audit-checks">
	<div class="ach">
	<div class="ach-icon"><i class="fas fa-chart-line"></i></div><span class="ach-text">SEO Engine — هل تظهر في نتائج Google الأولى؟</span>
	</div>
	<div class="ach">
	<div class="ach-icon"><i class="fas fa-robot"></i></div><span class="ach-text">AI Visibility Engine — هل يذكرك ChatGPT
	وGemini؟</span>
	</div>
	<div class="ach">
	<div class="ach-icon"><i class="fas fa-bullseye"></i></div><span class="ach-text">Ads Engine — هل Funnel التحويل يعمل؟</span>
	</div>
	<div class="ach">
	<div class="ach-icon"><i class="fas fa-pen-nib"></i></div><span class="ach-text">Content Engine — هل محتواك يستهدف عميلك الصح؟</span>
	</div>
	<div class="ach">
	<div class="ach-icon"><i class="fas fa-star"></i></div><span class="ach-text">Trust Engine — ما قوة تقييماتك ومصداقيتك؟</span>
	</div>
	</div>
	</div>
	<div class="audit-form reveal">

	<div id="form-panel">
	<h3>احصل على تقرير الـ 5 محركات</h3>
	<p>نحلل وضعك في كل محرك ونرسلك خطة عمل مجانية</p>
	<div class="fg"><label>الاسم الكامل</label><input type="text" id="inp-name" placeholder="محمد أحمد"></div>
	<div class="fg"><label>البريد الإلكتروني</label><input type="email" id="inp-email"
	placeholder="info@company.com"></div>
	<div class="fg"><label>رقم الواتساب</label><input type="tel" id="inp-phone" placeholder="+966 5x xxx xxxx">
	</div>
	<div class="fg">
	<label>القطاع</label>
	<select id="inp-sector">
	<option value="">اختر قطاعك</option>
	<option>عيادات ومراكز طبية</option>
	<option>مطاعم وF&B</option>
	<option>عقارات</option>
	<option>تعليم واستشارات</option>
	<option>تجارة إلكترونية</option>
	<option>شركات ناشئة</option>
	<option>خدمات B2B</option>
	<option>أخرى</option>
	</select>
	</div>
	<div class="fg"><label>موقعك الإلكتروني</label><input type="url" id="inp-url"
	placeholder="https://yourwebsite.com"></div>
	<button class="btn-primary" id="audit-btn"
	style="width:100%;text-align:center;padding:.9rem;border-radius:13px;font-size:.93rem;cursor:pointer">تحليل
	المحركات الـ 5 ←</button>
	<p
	style="font-size:.72rem;color:var(--gray);text-align:center;margin-top:.75rem;display:flex;align-items:center;justify-content:center;gap:.35rem">
	🔒 بياناتك محمية — نتواصل مرة واحدة فقط</p>
	</div>
	<div id="load-panel" style="display:none;padding:1rem 0">
	<div style="text-align:center;padding:2rem 0">
	<div
	style="width:44px;height:44px;border:3px solid var(--border-dark);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.1rem">
	</div>
	<p style="font-weight:700;color:var(--white);margin-bottom:.35rem" id="load-text">جاري تحليل SEO Engine...
	</p>
	<p style="font-size:.76rem;color:var(--gray)" id="load-sub">نفحص ترتيبك في Google</p>
	</div>
	</div>
	<div id="result-panel" style="display:none">
	<div class="rp">
	<div class="rp-hd">
	<div class="rp-logo-dot"></div>
	<span class="rp-logo">محرك</span>
	<span class="rp-title">Search Growth System Audit</span>
	<span class="rp-badge">مجاني</span>
	</div>
	<div class="rp-body">
	<div class="rp-score-row">
	<div class="rp-circle">32</div>
	<div class="rp-info">
	<h4>نظام نموك يحتاج تفعيل</h4>
	<p>3 من أصل 5 محركات غير مفعّلة</p>
	</div>
	</div>
	<div class="rp-checks">
	<div class="rpck"><span class="rpck-icon">📈</span><span class="rpck-lbl">SEO Engine</span><span
	class="rpck-val bad">ضعيف</span></div>
	<div class="rpck"><span class="rpck-icon">🤖</span><span class="rpck-lbl">AI Visibility
	Engine</span><span class="rpck-val bad">صفر</span></div>
	<div class="rpck"><span class="rpck-icon">🎯</span><span class="rpck-lbl">Ads Engine</span><span
	class="rpck-val bad">غير محسّن</span></div>
	<div class="rpck"><span class="rpck-icon">📝</span><span class="rpck-lbl">Content Engine</span><span
	class="rpck-val ok">متوسط</span></div>
	<div class="rpck"><span class="rpck-icon">⭐</span><span class="rpck-lbl">Trust Engine</span><span
	class="rpck-val ok">متوسط</span></div>
	</div>
	</div>
	</div>
	<div style="background:rgba(15,66,70,.08);border-radius:13px;padding:1.1rem;margin-bottom:.85rem">
	<p style="font-size:.83rem;font-weight:700;color:var(--white);margin-bottom:.3rem">التقرير الكامل في طريقه
	إليك</p>
	<p style="font-size:.76rem;color:var(--gray)">سيتواصل فريقنا خلال ساعات بتقرير تفصيلي لكل محرك + خطة عمل
	مجانية.</p>
	</div>
	<a href="https://wa.me/201012345678" target="_blank"
	style="display:block;text-align:center;background:#25D366;color:#fff;padding:.83rem;border-radius:13px;font-weight:800;font-size:.9rem;text-decoration:none">تحدث
	مع خبير الآن على واتساب</a>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- ══ FAQ SECTION ══ -->
	<section class="faq-section" id="faq" style="background:var(--p-dark);padding:7rem 5vw;border-top:1px solid rgba(255,255,255,.06)">
	<div class="container">
	<div class="s-head reveal">
	<div>
	<span class="s-tag s-tag-w">الأسئلة الشائعة</span>
	<h2 class="sh sh-w">كل ما تحتاج <span>معرفته عن محرك</span></h2>
	<p class="sd sd-w">إجابات واضحة على أكثر الأسئلة شيوعاً حول خدماتنا ونظام الـ 5 محركات.</p>
	</div>
	</div>

	<!-- المفاهيم الأساسية -->
	<div style="margin-bottom:3rem">
	<h3 style="font-size:1.4rem;font-weight:900;color:var(--accent);margin-bottom:1.5rem;display:flex;align-items:center;gap:.6rem">
	<i class="fas fa-lightbulb"></i> المفاهيم الأساسية
	</h3>
	<div style="display:flex;flex-direction:column;gap:1rem">
	<div class="faq-item reveal" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.8rem;transition:all .3s">
	<h4 style="font-size:1.05rem;font-weight:800;color:var(--white);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem">
	<span style="color:var(--accent);font-size:.9rem">س1:</span> ما هو الـ SEO ولماذا أحتاجه؟
	</h4>
	<p style="font-size:.92rem;color:rgba(255,255,255,.65);line-height:1.85">
	هو تحسين موقعك للظهور في نتائج Google المجانية، مما يجلب لك زواراً مهتمين بخدماتك دون دفع تكاليف إعلانية لكل نقرة.
	</p>
	</div>

	<div class="faq-item reveal rd1" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.8rem;transition:all .3s">
	<h4 style="font-size:1.05rem;font-weight:800;color:var(--white);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem">
	<span style="color:var(--accent);font-size:.9rem">س2:</span> ما الفرق بين الـ SEO والظهور في الذكاء الاصطناعي (AEO)؟
	</h4>
	<p style="font-size:.92rem;color:rgba(255,255,255,.65);line-height:1.85">
	الـ SEO يجعلك تظهر كـ "رابط" في محركات البحث، بينما الـ AEO يجعلك تظهر كـ "إجابة" أو "مصدر موثوق" داخل محادثات ChatGPT وPerplexity.
	</p>
	</div>

	<div class="faq-item reveal rd2" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.8rem;transition:all .3s">
	<h4 style="font-size:1.05rem;font-weight:800;color:var(--white);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem">
	<span style="color:var(--accent);font-size:.9rem">س3:</span> كيف يرى الذكاء الاصطناعي موقعي؟
	</h4>
	<p style="font-size:.92rem;color:rgba(255,255,255,.65);line-height:1.85">
	يحلل السياق والموثوقية وليس فقط الكلمات. "محاكي رؤية AI" لدينا يكشف لك كيف تفهم هذه المحركات موقعك ولماذا قد تتجاهلك.
	</p>
	</div>
	</div>
	</div>

	<!-- الباقات والخدمات -->
	<div style="margin-bottom:3rem">
	<h3 style="font-size:1.4rem;font-weight:900;color:var(--accent);margin-bottom:1.5rem;display:flex;align-items:center;gap:.6rem">
	<i class="fas fa-box"></i> الباقات والخدمات
	</h3>
	<div style="display:flex;flex-direction:column;gap:1rem">
	<div class="faq-item reveal" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.8rem;transition:all .3s">
	<h4 style="font-size:1.05rem;font-weight:800;color:var(--white);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem">
	<span style="color:var(--accent);font-size:.9rem">س4:</span> ما الذي يميز "محاكي رؤية AI" الخاص بنا؟
	</h4>
	<p style="font-size:.92rem;color:rgba(255,255,255,.65);line-height:1.85">
	هي أداة حصرية تمنحك "نظرة الذكاء الاصطناعي" لموقعك، وتحدد الفجوات التقنية التي تمنع ChatGPT من ترشيحك لعملائه.
	</p>
	</div>

	<div class="faq-item reveal rd1" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.8rem;transition:all .3s">
	<h4 style="font-size:1.05rem;font-weight:800;color:var(--white);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem">
	<span style="color:var(--accent);font-size:.9rem">س5:</span> كيف أختار الباقة المناسبة لي؟
	</h4>
	<p style="font-size:.92rem;color:rgba(255,255,255,.65);line-height:1.85;margin-bottom:.8rem">
	• <strong style="color:var(--white)">الأساسية:</strong> للاستكشاف وفهم المشاكل (مجانية).<br>
	• <strong style="color:var(--white)">الاحترافية:</strong> للنمو والسيطرة على المنافسين (2499 ريال).<br>
	• <strong style="color:var(--white)">التشغيل الكامل:</strong> إذا أردت فريقاً كاملاً يدير لك (SEO + AI + Ads + CRO).
	</p>
	</div>

	<div class="faq-item reveal rd2" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.8rem;transition:all .3s">
	<h4 style="font-size:1.05rem;font-weight:800;color:var(--white);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem">
	<span style="color:var(--accent);font-size:.9rem">س6:</span> ما هو نظام الـ 5 محركات؟
	</h4>
	<p style="font-size:.92rem;color:rgba(255,255,255,.65);line-height:1.85">
	استراتيجية متكاملة تجمع بين: البحث التقليدي، ظهور AI، صناعة المحتوى، بناء الثقة، وإدارة الإعلانات لضمان أعلى عائد.
	</p>
	</div>
	</div>
	</div>

	<!-- النتائج والدعم -->
	<div style="margin-bottom:3rem">
	<h3 style="font-size:1.4rem;font-weight:900;color:var(--accent);margin-bottom:1.5rem;display:flex;align-items:center;gap:.6rem">
	<i class="fas fa-chart-line"></i> النتائج والدعم
	</h3>
	<div style="display:flex;flex-direction:column;gap:1rem">
	<div class="faq-item reveal" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.8rem;transition:all .3s">
	<h4 style="font-size:1.05rem;font-weight:800;color:var(--white);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem">
	<span style="color:var(--accent);font-size:.9rem">س7:</span> متى سأرى نتائج فعلية؟
	</h4>
	<p style="font-size:.92rem;color:rgba(255,255,255,.65);line-height:1.85">
	تظهر المؤشرات الأولية خلال 3 أشهر، بينما تحتاج النتائج المستدامة والسيطرة الكاملة من 6 إلى 12 شهراً.
	</p>
	</div>

	<div class="faq-item reveal rd1" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.8rem;transition:all .3s">
	<h4 style="font-size:1.05rem;font-weight:800;color:var(--white);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem">
	<span style="color:var(--accent);font-size:.9rem">س8:</span> هل تضمنون المركز الأول في Google؟
	</h4>
	<p style="font-size:.92rem;color:rgba(255,255,255,.65);line-height:1.85">
	لا يمكن لأحد ضمان خوارزميات Google، لكننا نضمن تطبيق استراتيجيات مثبتة ترفع ترتيبك وتزيد ظهورك في محركات الـ AI بشكل ملموس.
	</p>
	</div>

	<div class="faq-item reveal rd2" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.8rem;transition:all .3s">
	<h4 style="font-size:1.05rem;font-weight:800;color:var(--white);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem">
	<span style="color:var(--accent);font-size:.9rem">س9:</span> كيف نتابع تقدم العمل؟
	</h4>
	<p style="font-size:.92rem;color:rgba(255,255,255,.65);line-height:1.85">
	عبر تقارير دورية ولوحة بيانات (Dashboard) حية تعرض لك نمو الزيارات، الترتيب، ومدى ظهورك في منصات الذكاء الاصطناعي.
	</p>
	</div>

	<div class="faq-item reveal rd3" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.8rem;transition:all .3s">
	<h4 style="font-size:1.05rem;font-weight:800;color:var(--white);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem">
	<span style="color:var(--accent);font-size:.9rem">س10:</span> هل الخدمات مناسبة للمشاريع الناشئة؟
	</h4>
	<p style="font-size:.92rem;color:rgba(255,255,255,.65);line-height:1.85">
	نعم، صممنا الباقة الأساسية والاحترافية لتمكين المشاريع الناشئة من المنافسة بأدوات ذكية وميزانيات مرنة.
	</p>
	</div>
	</div>
	</div>

	<!-- CTA Box -->
	<div class="reveal" style="background:linear-gradient(135deg,rgba(200,240,78,.08),rgba(95,212,220,.06));border:1px solid rgba(200,240,78,.25);border-radius:22px;padding:2.5rem;text-align:center;margin-top:3rem">
	<h3 style="font-size:1.5rem;font-weight:900;color:var(--white);margin-bottom:.8rem">
	لديك سؤال آخر؟
	</h3>
	<p style="font-size:1rem;color:rgba(255,255,255,.7);margin-bottom:1.8rem;line-height:1.8">
	فريقنا جاهز للإجابة على جميع استفساراتك ومساعدتك في اختيار الحل المناسب لنشاطك التجاري
	</p>
	<a href="https://wa.me/966564696207" target="_blank" class="btn-primary" style="display:inline-flex;align-items:center;gap:.6rem">
	<i class="fab fa-whatsapp"></i> تواصل معنا الآن
	</a>
	</div>
	</div>
	</section>

	<style>
	.faq-item:hover {
	background: rgba(255,255,255,.08) !important;
	border-color: rgba(200,240,78,.3) !important;
	transform: translateX(-5px);
	}
	</style>

	<!-- FOOTER -->
	<footer> <div class="footer-inner">
	<div class="footer-brand">
	<a class="logo" href="#"><span class="logo-dot"></span>محرك</a>
	<p>استقطب آلاف العملاء الحقيقيين الى موقعك الإلكتروني من خلال خطط محرك المتوازية مع أهداف نشاطك التجاري.</p>
	<div style="margin-top:1.2rem;display:flex;gap:.65rem;flex-wrap:wrap">
	<a href="#" style="color:rgba(255,255,255,.35);font-size:.78rem;text-decoration:none;border:1px solid rgba(255,255,255,.1);padding:.36rem .82rem;border-radius:50px" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.35)'"><i class="fab fa-facebook"></i> Facebook</a>
	<a href="#" style="color:rgba(255,255,255,.35);font-size:.78rem;text-decoration:none;border:1px solid rgba(255,255,255,.1);padding:.36rem .82rem;border-radius:50px" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.35)'"><i class="fab fa-x-twitter"></i> X</a>
	<a href="#" style="color:rgba(255,255,255,.35);font-size:.78rem;text-decoration:none;border:1px solid rgba(255,255,255,.1);padding:.36rem .82rem;border-radius:50px" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.35)'"><i class="fab fa-youtube"></i> YouTube</a>
	<a href="#" style="color:rgba(255,255,255,.35);font-size:.78rem;text-decoration:none;border:1px solid rgba(255,255,255,.1);padding:.36rem .82rem;border-radius:50px" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.35)'"><i class="fab fa-instagram"></i> Instagram</a>
	<a href="#" style="color:rgba(255,255,255,.35);font-size:.78rem;text-decoration:none;border:1px solid rgba(255,255,255,.1);padding:.36rem .82rem;border-radius:50px" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.35)'"><i class="fab fa-linkedin"></i> LinkedIn</a>
	<a href="#" style="color:rgba(255,255,255,.35);font-size:.78rem;text-decoration:none;border:1px solid rgba(255,255,255,.1);padding:.36rem .82rem;border-radius:50px" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.35)'"><i class="fab fa-tiktok"></i> TikTok</a>
	<a href="#" style="color:rgba(255,255,255,.35);font-size:.78rem;text-decoration:none;border:1px solid rgba(255,255,255,.1);padding:.36rem .82rem;border-radius:50px" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.35)'"><i class="fab fa-snapchat"></i> Snapchat</a>
	</div>
	<div style="margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08)">
	<img src="https://via.placeholder.com/120x60/0F4246/c8f04e?text=شهادة+التوثيق" alt="شهادة توثيق التجارة الالكترونية" style="max-width:120px;height:auto;opacity:.7">
	</div>
	</div>
	<div class="footer-col">
	<h4>خدمات محرك</h4>
	<ul>
	<li><a href="#">تحسين ظهور المواقع في نتائج البحث</a></li>
	<li><a href="#">SEO الذكاء الاصطناعي</a></li>
	<li><a href="#">السيو المحلي Local SEO</a></li>
	<li><a href="#">تحسين بحث التطبيقات ASO</a></li>
	</ul>
	</div>
	<div class="footer-col">
	<h4>الصفحات التعريفية</h4>
	<ul>
	<li><a href="#">من نحن</a></li>
	<li><a href="#">المدونة</a></li>
	<li><a href="#">المشروعات</a></li>
	<li><a href="#audit">تواصل معنا</a></li>
	</ul>
	</div>
	<div class="footer-col">
	<h4>موقعنا</h4>
	<ul>
	<li><i class="fas fa-map-marker-alt" style="color:var(--accent);margin-left:.4rem"></i> مكة المكرمة</li>
	<li style="padding-right:1.2rem;font-size:.78rem;color:rgba(255,255,255,.3)">حي الخضراء</li>
	<li style="padding-right:1.2rem;font-size:.78rem;color:rgba(255,255,255,.3)">حبيب بن مروان التميمي</li>
	<li style="margin-top:.8rem"><a href="tel:+966564696207"><i class="fas fa-phone" style="color:var(--accent);margin-left:.4rem"></i> +966 56 469 6207</a></li>
	</ul>
	</div>
	</div>
	<div class="footer-btm">
	<span>© 2025 محرك. جميع الحقوق محفوظة.</span>
	</div>
	</footer>

	<!-- WhatsApp -->
	<a class="wa" href="https://wa.me/201012345678" target="_blank">
	<div class="wa-pulse"></div>
	<svg viewBox="0 0 24 24">
	<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 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-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 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.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 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
	</svg>
	</a>

	<script>
	/* ── Scroll reveal ── */
	const obs = new IntersectionObserver(entries => {
	entries.forEach(el => {
	if (el.isIntersecting) { el.target.classList.add('visible'); obs.unobserve(el.target); }
	});
	}, { threshold: .06 });
	document.querySelectorAll('.reveal').forEach(el => obs.observe(el));

	/* ── Nav shadow on scroll ── */
	window.addEventListener('scroll', () => {
	document.getElementById('main-nav').style.boxShadow =
	window.scrollY > 30 ? '0 4px 28px rgba(0,0,0,.35)' : 'none';
	});

	/* ── Interactive JS ── */
	document.addEventListener('DOMContentLoaded', () => {

	// Glow word hover
	document.querySelectorAll('.glow-word').forEach(el => {
	el.addEventListener('mouseenter', function () {
	this.style.textShadow = '0 0 60px rgba(200,240,78,1), 0 0 120px rgba(57,255,20,.5)';
	});
	el.addEventListener('mouseleave', function () { this.style.textShadow = ''; });
	});

	// Journey steps: click to activate
	document.querySelectorAll('.j-step').forEach(card => {
	card.addEventListener('click', function () {
	document.querySelectorAll('.j-step').forEach(c => c.classList.remove('active'));
	this.classList.add('active');
	});
	});

	// Engine cards: click to activate
	document.querySelectorAll('.e-card').forEach(card => {
	card.addEventListener('click', function () {
	document.querySelectorAll('.e-card').forEach(c => c.classList.remove('active'));
	this.classList.add('active');
	});
	});

	// Engine cards: auto-cycle animation
	let cycleInterval;
	const engineCards = document.querySelectorAll('.e-card');
	const startCycle = () => {
	let i = 0;
	cycleInterval = setInterval(() => {
	engineCards.forEach(c => c.classList.remove('active'));
	engineCards[i % engineCards.length].classList.add('active');
	i++;
	}, 2500);
	};
	const stopCycle = () => clearInterval(cycleInterval);
	startCycle();
	document.querySelector('.engines-flow-wrap')?.addEventListener('mouseenter', stopCycle);
	document.querySelector('.engines-flow-wrap')?.addEventListener('mouseleave', startCycle);

	});

	/* ── Login/Signup Handlers ── */
	window.handleLoginClick = function(e) {
	e.preventDefault();
	const token = localStorage.getItem('token');
	if (token) {
	window.location.href = '/portal.html';
	} else {
	window.location.href = '/login.html?mode=login';
	}
	};

	window.handleSignupClick = function(e) {
	e.preventDefault();
	const token = localStorage.getItem('token');
	if (token) {
	window.location.href = '/portal.html';
	} else {
	window.location.href = '/login.html?mode=signup';
	}
	};

	/* ── Audit Form ── */
	const msgs = [
	['جاري تحليل SEO Engine...', 'نفحص ترتيبك في Google والكلمات المفتاحية'],
	['جاري تحليل AI Visibility...', 'نفحص ظهورك في ChatGPT وGemini'],
	['جاري تحليل Ads Engine...', 'نفحص الـ Funnel والتحويلات'],
	['جاري تحليل Trust Engine...', 'نفحص تقييماتك ومصداقيتك الرقمية'],
	['جاري إعداد التقرير...', '5 محركات — تقريرك في طريقه إليك']
	];
	document.getElementById('audit-btn').addEventListener('click', async function () {
	const n = document.getElementById('inp-name').value.trim();
	const e = document.getElementById('inp-email').value.trim();
	const p = document.getElementById('inp-phone').value.trim();
	const url = document.getElementById('inp-url').value.trim();
	if (!n \|\| !e \|\| !p \|\| !url) {
	this.textContent = '⚠️ يرجى ملء الحقول المطلوبة';
	this.style.background = '#c0392b'; this.style.color = '#fff';
	setTimeout(() => { this.textContent = 'تحليل المحركات الـ 5 ←'; this.style.background = ''; this.style.color = ''; }, 2500);
	return;
	}
	try {
	const res = await fetch('http://localhost:8001/api/jobs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: url, org_name: n, org_url: url, max_pages: 50, runs: 1 }) });
	const data = await res.json();
	if (data.ok) {
	localStorage.setItem('clientName', n);
	localStorage.setItem('clientEmail', e);
	localStorage.setItem('clientPhone', p);
	localStorage.setItem('jobId', data.job_id);
	window.location.href = '/portal.html?job=' + data.job_id;
	} else {
	throw new Error('API error');
	}
	} catch (err) {
	this.textContent = 'حدث خطأ — حاول مجددًا';
	this.style.background = '#c0392b'; this.style.color = '#fff';
	setTimeout(() => { this.textContent = 'تحليل المحركات الـ 5 ←'; this.style.background = ''; this.style.color = ''; }, 2500);
	}
	});
	</script>
	</body>

	</html>