:root {
			--primary: #2563eb;
			--primary-dark: #1d4ed8;
			--secondary: #0f172a;
			--accent: #7c3aed;
			--accent-teal: #06b6d4;
			--text: #334155;
			--muted: #64748b;
			--bg: #f8fafc;
			--white: #ffffff;
			--radius: 16px;
			--shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
		}

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

		body {
			font-family: Vazir, Tahoma, 'Segoe UI', Arial, sans-serif;
			background: var(--bg);
			color: var(--text);
			line-height: 1.8;
		}

		a { color: var(--primary); text-decoration: none; }
		a:hover { text-decoration: underline; }

		.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

		.site-header {
			position: sticky;
			top: 0;
			z-index: 100;
			background: rgba(255,255,255,0.92);
			backdrop-filter: blur(12px);
			border-bottom: 1px solid #e2e8f0;
		}

		.site-header .container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 72px;
		}

		.logo {
			font-size: 22px;
			font-weight: 800;
			color: var(--secondary);
		}

		.logo span { color: var(--primary); }

		.nav { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

		.nav a { color: var(--text); font-weight: 600; font-size: 15px; }
		.nav a:hover { color: var(--primary); text-decoration: none; }

		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 14px 28px;
			border-radius: 12px;
			font-weight: 700;
			font-size: 15px;
			border: none;
			cursor: pointer;
			transition: transform 0.2s, box-shadow 0.2s;
		}

		.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }

		.btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; }
		.btn-primary:hover { color: #fff; }

		.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
		.btn-outline:hover { background: var(--primary); color: #fff; }

		.hero {
			padding: 100px 0 80px;
			background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #f5f3ff 100%);
			overflow: hidden;
			position: relative;
		}

		.hero::before {
			content: '';
			position: absolute;
			width: 600px;
			height: 600px;
			background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, transparent 70%);
			top: -200px;
			left: -200px;
			border-radius: 50%;
		}

		.hero-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 48px;
			align-items: center;
			position: relative;
		}

		.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }

		.hero-badge {
			display: inline-block;
			background: #dbeafe;
			color: var(--primary-dark);
			padding: 6px 16px;
			border-radius: 999px;
			font-size: 13px;
			font-weight: 700;
		}

		.hero-badge--ai {
			background: linear-gradient(135deg, #ede9fe, #dbeafe);
			color: #5b21b6;
		}

		.hero h1 {
			font-size: clamp(32px, 5vw, 52px);
			line-height: 1.25;
			color: var(--secondary);
			margin-bottom: 20px;
			font-weight: 900;
		}

		.hero h1 em {
			font-style: normal;
			background: linear-gradient(135deg, var(--primary), var(--accent));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		.hero-lead {
			font-size: 18px;
			color: var(--muted);
			margin-bottom: 32px;
			max-width: 520px;
		}

		.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }

		.hero-stats {
			display: flex;
			gap: 28px;
			flex-wrap: wrap;
		}

		.hero-stat strong {
			display: block;
			font-size: 28px;
			color: var(--secondary);
		}

		.hero-stat span { font-size: 13px; color: var(--muted); }

		.hero-visual {
			background: var(--white);
			border-radius: 20px;
			box-shadow: var(--shadow);
			padding: 24px;
			border: 1px solid #e2e8f0;
		}

		.mock-editor {
			background: #1e293b;
			border-radius: 12px;
			overflow: hidden;
		}

		.mock-toolbar {
			background: #0f172a;
			padding: 12px 16px;
			display: flex;
			gap: 8px;
			align-items: center;
			justify-content: space-between;
		}

		.mock-toolbar-left { display: flex; gap: 8px; align-items: center; }

		.mock-dot { width: 12px; height: 12px; border-radius: 50%; }
		.mock-dot:nth-child(1) { background: #ef4444; }
		.mock-dot:nth-child(2) { background: #f59e0b; }
		.mock-dot:nth-child(3) { background: #22c55e; }

		.mock-ai-btn {
			background: linear-gradient(135deg, rgba(37,99,235,0.3), rgba(124,58,237,0.3));
			border: 1px solid rgba(147,197,253,0.4);
			color: #e0e7ff;
			font-size: 11px;
			padding: 4px 10px;
			border-radius: 6px;
			font-weight: 600;
		}

		.mock-body {
			display: grid;
			grid-template-columns: 160px 1fr 180px;
			min-height: 280px;
		}

		.mock-panel { background: #334155; padding: 16px; }
		.mock-panel--side { background: #1e293b; }
		.mock-canvas { background: #fff; padding: 20px; }

		.mock-block {
			background: linear-gradient(135deg, #2563eb, #7c3aed);
			border-radius: 8px;
			height: 80px;
			margin-bottom: 12px;
		}

		.mock-block--sm { height: 40px; opacity: 0.7; }

		.section { padding: 80px 0; }
		.section-header { text-align: center; max-width: 680px; margin: 0 auto 56px; }
		.section-header h2 { font-size: 36px; color: var(--secondary); margin-bottom: 16px; }
		.section-header p { color: var(--muted); font-size: 17px; }

		.section--alt { background: #fff; }

		.features-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 24px;
		}

		.feature-card {
			background: var(--white);
			border-radius: var(--radius);
			padding: 32px;
			border: 1px solid #e2e8f0;
			transition: transform 0.2s, box-shadow 0.2s;
		}

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

		.feature-card--highlight {
			border: 2px solid rgba(37, 99, 235, 0.25);
			background: linear-gradient(180deg, #fff 0%, #f8faff 100%);
		}

		.feature-icon {
			width: 56px;
			height: 56px;
			background: linear-gradient(135deg, #dbeafe, #ede9fe);
			border-radius: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28px;
			margin-bottom: 20px;
		}

		.feature-card h3 { font-size: 20px; color: var(--secondary); margin-bottom: 10px; }
		.feature-card p { color: var(--muted); font-size: 15px; }

		.feature-tag {
			display: inline-block;
			margin-top: 12px;
			font-size: 12px;
			font-weight: 700;
			color: var(--primary);
			background: #eff6ff;
			padding: 4px 10px;
			border-radius: 999px;
		}

		.ai-section {
			background: linear-gradient(135deg, #1e3a8a 0%, #312e81 50%, #1e40af 100%);
			color: #e2e8f0;
		}

		.ai-section .section-header h2 { color: #fff; }
		.ai-section .section-header p { color: #c7d2fe; }

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

		.ai-card {
			background: rgba(255,255,255,0.08);
			border: 1px solid rgba(255,255,255,0.12);
			border-radius: 14px;
			padding: 24px;
			backdrop-filter: blur(8px);
		}

		.ai-card h3 { color: #fff; font-size: 18px; margin-bottom: 8px; }
		.ai-card p { color: #c7d2fe; font-size: 14px; }

		.ai-note {
			text-align: center;
			margin-top: 32px;
			padding: 16px 24px;
			background: rgba(255,255,255,0.06);
			border-radius: 12px;
			font-size: 14px;
			color: #a5b4fc;
		}

		.compare-section { background: var(--secondary); color: #e2e8f0; }
		.compare-section .section-header h2 { color: #fff; }
		.compare-section .section-header p { color: #94a3b8; }

		.compare-table {
			width: 100%;
			border-collapse: collapse;
			background: rgba(255,255,255,0.05);
			border-radius: var(--radius);
			overflow: hidden;
		}

		.compare-table th,
		.compare-table td {
			padding: 16px 20px;
			text-align: center;
			border-bottom: 1px solid rgba(255,255,255,0.08);
		}

		.compare-table th { background: rgba(255,255,255,0.08); font-weight: 700; }
		.compare-table td:first-child { text-align: right; font-weight: 600; }
		.compare-table .yes { color: #4ade80; font-size: 20px; }
		.compare-table .no { color: #f87171; font-size: 20px; }
		.compare-table .highlight { background: rgba(37,99,235,0.2); }

		.widgets-showcase {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
			gap: 12px;
		}

		.widget-tag {
			background: var(--white);
			border: 1px solid #e2e8f0;
			border-radius: 10px;
			padding: 14px 12px;
			text-align: center;
			font-size: 14px;
			font-weight: 600;
			color: var(--secondary);
		}

		.widget-tag--wc { border-color: #bfdbfe; background: #eff6ff; }

		.steps {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
			gap: 24px;
		}

		.step {
			text-align: center;
			padding: 32px 24px;
			background: var(--white);
			border-radius: var(--radius);
			border: 1px solid #e2e8f0;
		}

		.step-num {
			width: 48px;
			height: 48px;
			background: var(--primary);
			color: #fff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 800;
			font-size: 20px;
			margin: 0 auto 16px;
		}

		.faq-list { max-width: 760px; margin: 0 auto; }

		.faq-item {
			background: var(--white);
			border: 1px solid #e2e8f0;
			border-radius: 12px;
			margin-bottom: 12px;
			overflow: hidden;
		}

		.faq-q {
			padding: 20px 24px;
			font-weight: 700;
			color: var(--secondary);
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.faq-a {
			padding: 0 24px 20px;
			color: var(--muted);
			display: none;
		}

		.faq-item.open .faq-a { display: block; }

		.cta-section {
			background: linear-gradient(135deg, var(--primary), var(--accent));
			color: #fff;
			text-align: center;
			padding: 80px 24px;
			border-radius: 24px;
			margin: 0 24px 80px;
		}

		.cta-section h2 { font-size: 36px; margin-bottom: 16px; }
		.cta-section p { opacity: 0.95; margin-bottom: 32px; font-size: 18px; }
		.cta-section .btn { background: #fff; color: var(--primary); }

		.guides-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 24px;
			max-width: 800px;
			margin: 0 auto;
		}

		.guide-card {
			background: var(--white);
			border: 1px solid #e2e8f0;
			border-radius: var(--radius);
			padding: 32px;
			text-align: center;
			transition: transform 0.2s, box-shadow 0.2s;
		}

		.guide-card:hover {
			transform: translateY(-4px);
			box-shadow: var(--shadow);
		}

		.guide-card--dev { border-color: rgba(6, 182, 212, 0.35); }

		.guide-card-icon {
			font-size: 40px;
			margin-bottom: 16px;
		}

		.guide-card h3 {
			font-size: 20px;
			color: var(--secondary);
			margin-bottom: 10px;
		}

		.guide-card p {
			color: var(--muted);
			font-size: 15px;
			margin-bottom: 20px;
		}

		.download-box {
			max-width: 560px;
			margin: 32px auto 0;
			padding: 28px 32px;
			background: rgba(255,255,255,0.12);
			border: 1px solid rgba(255,255,255,0.2);
			border-radius: 16px;
		}

		.download-buttons {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
			justify-content: center;
		}

		.download-buttons .btn { min-width: 220px; }

		.btn-download-alt {
			background: transparent;
			border: 2px solid rgba(255,255,255,0.85);
			color: #fff;
		}

		.btn-download-alt:hover {
			background: rgba(255,255,255,0.15);
			color: #fff;
		}

		.download-meta {
			margin-top: 16px;
			font-size: 13px;
			opacity: 0.85;
		}

		.site-footer {
			background: var(--secondary);
			color: #94a3b8;
			padding: 48px 0 32px;
			text-align: center;
		}

		.site-footer a { color: #e2e8f0; }

		@media (max-width: 900px) {
			.hero-grid { grid-template-columns: 1fr; }
			.hero-visual { order: -1; }
			.nav { display: none; }
			.mock-body { grid-template-columns: 1fr; min-height: 200px; }
			.mock-panel { display: none; }
		}

/* WordPress nav menu inside marketing header */
.dima-marketing-landing .site-header .nav ul {
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dima-marketing-landing .site-header .nav li {
	margin: 0;
}