add new marking-content layout

src/app/styles/global-styles.scss

@@ -32,6 +32,30 @@
 	}
 }
 
+.page-title-color-frame {
+	background: linear-gradient(135deg, v.$p-color 0%, v.$s-color 100%);
+	padding: 2rem;
+	border-radius: 16px;
+	margin-bottom: 2rem;
+	box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
+
+	h1 {
+		color: v.$white;
+		font-size: 2rem;
+		font-weight: 700;
+		margin: 0 0 0.5rem 0;
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	p {
+		color: rgba(255, 255, 255, 0.9);
+		font-size: 1rem;
+		margin: 0;
+	}
+}
+
 .main-containter-wrapper {
 	margin-left: var(--side-bar-width);
 	;
@@ -399,4 +423,8 @@
 			}
 		}
 	}
+}
+
+.yaPreloadingSuggestBlockContainer {
+	height: 52px !important;
 }

src/app/styles/pages-styles.scss

@@ -1825,6 +1825,35 @@
 	}
 }
 
-.yaPreloadingSuggestBlockContainer {
-	height: 52px !important;
+.protection-statistic {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: 1.5rem;
+	margin-bottom: 2rem;
+
+	&-stat-card {
+		background: white;
+		padding: 1.5rem;
+		border-radius: 12px;
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
+		border: 2px solid #f3f4f6;
+		text-align: center;
+		transition: all 0.3s;
+	}
+
+	&-stat-number {
+		font-size: 2rem;
+		font-weight: 700;
+		/* background: linear-gradient(135deg, #667eea, #764ba2);
+		background-clip: text;
+		-webkit-text-fill-color: transparent; */
+		color: v.$p-color;
+		margin-bottom: 0.5rem;
+	}
+
+	&-stat-label {
+		font-size: 0.9rem;
+		color: #6b7280;
+		font-weight: 500;
+	}
 }