/**
 * 🧩 Mega Blocks — front-end CSS.
 * Всеки блок има --mp-primary / --mp-accent CSS variables които идват от inline style.
 */

/* Shared */
.mb-hero, .mb-cta, .mb-feat, .mb-test, .mb-pr, .mb-stat {
	--mp-primary: #6366f1;
	--mp-accent:  #ec4899;
	box-sizing: border-box;
}
.mb-hero *, .mb-cta *, .mb-feat *, .mb-test *, .mb-pr *, .mb-stat * { box-sizing: border-box; }

/* ═════════════════ HERO ═════════════════ */
.mb-hero {
	position: relative;
	min-height: var(--mp-minh, 600px);
	padding: 100px 24px;
	overflow: hidden;
	background: linear-gradient(160deg,#1f2129,#16181e);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mb-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	background:
		radial-gradient(circle at 20% 30%, var(--mp-primary) 0, transparent 45%),
		radial-gradient(circle at 80% 70%, var(--mp-accent)  0, transparent 45%);
	opacity: .5; filter: blur(80px);
}
.mb-hero__inner { position: relative; z-index: 1; max-width: 900px; text-align: center; }
.mb-hero__eyebrow {
	display: inline-block;
	padding: 8px 16px;
	background: rgba(255,255,255,.08);
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 100px; font-size: 14px; margin-bottom: 24px;
}
.mb-hero__title {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 800; line-height: 1.1; margin: 0 0 24px;
	letter-spacing: -.02em; color: #fff;
}
.mb-hero__title em {
	font-style: normal;
	background: linear-gradient(135deg, var(--mp-primary), var(--mp-accent));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.mb-hero__lead { font-size: 1.25rem; opacity: .75; margin: 0 0 40px; line-height: 1.6; }
.mb-hero__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.mb-hero__btn {
	display: inline-flex; align-items: center;
	padding: 14px 28px; border-radius: 100px;
	font-weight: 600; text-decoration: none;
	transition: transform .2s, box-shadow .2s;
}
.mb-hero__btn:hover { transform: translateY(-2px); }
.mb-hero__btn--primary { background: var(--mp-primary); color: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.3); }
.mb-hero__btn--ghost   { color: #fff; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ═════════════════ CTA ═════════════════ */
.mb-cta {
	padding: 80px 24px;
	background: linear-gradient(135deg, var(--mp-primary), var(--mp-accent));
	position: relative; overflow: hidden;
	color: #fff; text-align: center;
}
.mb-cta::before, .mb-cta::after {
	content: ''; position: absolute;
	width: 400px; height: 400px; border-radius: 50%;
	background: rgba(255,255,255,.1); filter: blur(80px);
}
.mb-cta::before { top: -100px; left: -100px; }
.mb-cta::after  { bottom: -100px; right: -100px; }
.mb-cta__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.mb-cta__inner h2 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin: 0 0 16px; color: #fff; }
.mb-cta__inner p  { font-size: 1.2rem; opacity: .9; margin: 0 0 32px; }
.mb-cta__btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.mb-cta__btn { padding: 14px 32px; border-radius: 100px; text-decoration: none; font-weight: 600; transition: .2s; }
.mb-cta__btn--main { background: #fff; color: var(--mp-primary); }
.mb-cta__btn--main:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.2); }
.mb-cta__btn--sec  { color: #fff; border: 1px solid rgba(255,255,255,.4); }
.mb-cta__btn--sec:hover { background: rgba(255,255,255,.1); }

/* ═════════════════ FEATURES ═════════════════ */
.mb-feat { padding: 80px 24px; background: #fff; }
.mb-feat__inner { max-width: 1200px; margin: 0 auto; }
.mb-feat__inner > header { text-align: center; margin-bottom: 56px; }
.mb-feat__inner > header h2 { font-size: 2.5rem; font-weight: 800; margin: 0 0 12px; color: #0f172a; }
.mb-feat__inner > header p  { color: #64748b; font-size: 1.15rem; margin: 0; }
.mb-feat__grid {
	display: grid;
	grid-template-columns: repeat(var(--mp-cols, 3), 1fr);
	gap: 24px;
}
@media (max-width: 800px) { .mb-feat__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .mb-feat__grid { grid-template-columns: 1fr; } }
.mb-feat__card {
	padding: 36px 28px;
	background: #f8fafc; border-radius: 20px;
	transition: .3s; border: 1px solid transparent;
}
.mb-feat__card:hover {
	transform: translateY(-6px); background: #fff;
	border-color: color-mix(in srgb, var(--mp-primary) 20%, transparent);
	box-shadow: 0 20px 40px -10px rgba(0,0,0,.1);
}
.mb-feat__icon {
	width: 56px; height: 56px;
	background: color-mix(in srgb, var(--mp-primary) 15%, transparent);
	border-radius: 14px; display: flex; align-items: center; justify-content: center;
	font-size: 1.75rem; margin-bottom: 20px; transition: .3s;
}
.mb-feat__card:hover .mb-feat__icon { background: var(--mp-primary); color: #fff; transform: rotate(-6deg) scale(1.08); }
.mb-feat__card h3 { margin: 0 0 10px; font-size: 1.3rem; color: #0f172a; }
.mb-feat__card p  { margin: 0; color: #64748b; line-height: 1.6; }

/* ═════════════════ TESTIMONIALS ═════════════════ */
.mb-test { padding: 80px 24px; background: #fff; }
.mb-test__inner { max-width: 1200px; margin: 0 auto; }
.mb-test__inner > header { text-align: center; margin-bottom: 48px; }
.mb-test__inner > header h2 { font-size: 2.5rem; font-weight: 800; margin: 0 0 12px; color: #0f172a; }
.mb-test__inner > header p  { color: #64748b; font-size: 1.1rem; margin: 0; }
.mb-test__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}
.mb-test__card {
	margin: 0; padding: 30px;
	background: #f8fafc; border-radius: 20px;
	transition: .3s;
}
.mb-test__card:hover { background: #fff; box-shadow: 0 20px 40px -10px rgba(0,0,0,.1); transform: translateY(-4px); }
.mb-test__stars { color: #fbbf24; font-size: 1.1rem; margin-bottom: 16px; }
.mb-test__card blockquote { margin: 0 0 24px; font-size: 1.02rem; color: #334155; line-height: 1.6; }
.mb-test__card figcaption { display: flex; gap: 12px; align-items: center; }
.mb-test__ava {
	width: 44px; height: 44px; border-radius: 50%;
	background: linear-gradient(135deg, var(--mp-primary), var(--mp-accent));
}
.mb-test__card figcaption strong { display: block; color: #0f172a; }
.mb-test__card figcaption span   { color: #64748b; font-size: .88rem; }

/* ═════════════════ PRICING ═════════════════ */
.mb-pr { padding: 80px 24px; background: #f8fafc; }
.mb-pr__inner { max-width: 1200px; margin: 0 auto; }
.mb-pr__inner > header { text-align: center; margin-bottom: 48px; }
.mb-pr__inner > header h2 { font-size: 2.5rem; font-weight: 800; margin: 0 0 12px; color: #0f172a; }
.mb-pr__inner > header p  { color: #64748b; font-size: 1.15rem; margin: 0; }
.mb-pr__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}
.mb-pr__card {
	position: relative; padding: 36px 28px;
	background: #fff; border-radius: 22px; border: 1px solid #e2e8f0;
	transition: .3s; display: flex; flex-direction: column;
}
.mb-pr__card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(0,0,0,.1); }
.mb-pr__card.is-popular {
	background: #0f172a; color: #fff;
	border-color: var(--mp-primary);
	transform: scale(1.03);
}
@media (max-width: 900px) { .mb-pr__card.is-popular { transform: none; } }
.mb-pr__badge {
	position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
	background: var(--mp-primary); color: #fff;
	padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 700;
}
.mb-pr__card h3 { font-size: 1.25rem; margin: 0 0 16px; }
.mb-pr__card.is-popular h3 { color: var(--mp-primary); }
.mb-pr__price { margin-bottom: 16px; }
.mb-pr__price span { font-size: 3rem; font-weight: 800; }
.mb-pr__price sup  { font-size: .95rem; font-weight: 600; color: #64748b; margin-left: 4px; }
.mb-pr__price small{ color: #64748b; }
.mb-pr__card.is-popular .mb-pr__price sup,
.mb-pr__card.is-popular .mb-pr__price small { color: #94a3b8; }
.mb-pr__card ul { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.mb-pr__card li { padding: 7px 0; color: #334155; }
.mb-pr__card.is-popular li { color: #e2e8f0; }
.mb-pr__card li::before { content: '✓ '; color: var(--mp-primary); font-weight: 700; }
.mb-pr__btn {
	display: block; text-align: center;
	padding: 13px; background: var(--mp-primary); color: #fff;
	text-decoration: none; font-weight: 600;
	border-radius: 12px; transition: .2s;
}
.mb-pr__btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* ═════════════════ STATS ═════════════════ */
.mb-stat { padding: 70px 24px; }
.mb-stat.is-dark  { background: #0f172a; color: #fff; }
.mb-stat.is-light { background: #fff; color: #0f172a; }
.mb-stat__inner {
	max-width: 1100px; margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 30px; text-align: center;
}
.mb-stat__n {
	display: block;
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 800;
	background: linear-gradient(135deg, var(--mp-primary), var(--mp-accent));
	-webkit-background-clip: text; background-clip: text; color: transparent;
	line-height: 1;
}
.mb-stat__l { display: block; margin-top: 8px; font-size: 1rem; }
.mb-stat.is-dark .mb-stat__l  { color: #94a3b8; }
.mb-stat.is-light .mb-stat__l { color: #64748b; }

/* ═════════════════ MEGA ELEMENT LIBRARY + CONTENT GRID ═════════════════ */
.mega-element-block { width:100%; }
.mega-element-placeholder { padding:24px; border:1px dashed #cbd5e1; border-radius:12px; color:#64748b; text-align:center; }
.mega-element-editor { padding:16px; border:1px dashed #94a3b8; border-radius:10px; background:#f8fafc; }
.mega-content-grid { width:100%; margin:32px 0; }
.mega-content-grid__items { display:grid; grid-template-columns:repeat(var(--mega-grid-cols,3),minmax(0,1fr)); gap:24px; }
.mega-content-card { overflow:hidden; background:#fff; border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 6px 24px rgba(15,23,42,.06); }
.mega-content-card__media { display:block; aspect-ratio:16/10; overflow:hidden; background:#f1f5f9; text-decoration:none; }
.mega-content-card__media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.mega-content-card:hover .mega-content-card__media img { transform:scale(1.04); }
.mega-content-card__media > span { display:flex; width:100%; height:100%; align-items:center; justify-content:center; font-size:2rem; color:#94a3b8; }
.mega-content-card__body { padding:20px; }
.mega-content-card__type { margin-bottom:8px; color:#6366f1; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.mega-content-card h3 { margin:0 0 8px; font-size:1.2rem; line-height:1.3; }
.mega-content-card h3 a { color:inherit; text-decoration:none; }
.mega-content-card p { margin:0; color:#64748b; line-height:1.6; }
.mega-content-grid--empty { padding:24px; border:1px dashed #cbd5e1; border-radius:12px; color:#64748b; text-align:center; }
.mega-content-grid-editor { display:flex; flex-direction:column; gap:8px; padding:24px; border:2px dashed #cbd5e1; border-radius:14px; background:#f8fafc; }
.mega-content-grid-editor__badge { color:#6366f1; font-weight:700; }
@media (max-width:900px) { .mega-content-grid__items { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .mega-content-grid__items { grid-template-columns:1fr; } }

/* ═════════════════ Block Styles (v2.38.0) ═════════════════ */

/* Hero — minimal (no glow) */
.mb-hero.is-style-minimal .mb-hero__bg { display: none; }
.mb-hero.is-style-minimal { background: var(--wp--preset--color--bg-alt, #f5f5f5); color: var(--wp--preset--color--text, #1a1a1a); }
.mb-hero.is-style-minimal .mb-hero__title { color: inherit; }
.mb-hero.is-style-minimal .mb-hero__title em { background: none; color: var(--mp-primary); -webkit-text-fill-color: var(--mp-primary); }
.mb-hero.is-style-minimal .mb-hero__eyebrow { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }

/* Hero — boxed (contained) */
.mb-hero.is-style-boxed { max-width: 1400px; margin: 24px auto; border-radius: 24px; overflow: hidden; }

/* CTA — outlined */
.mb-cta.is-style-outlined { background: transparent; color: inherit; border: 2px solid var(--mp-primary); }
.mb-cta.is-style-outlined .mb-cta__title { color: var(--mp-primary); }

/* CTA — dark */
.mb-cta.is-style-dark { background: #0f172a; color: #fff; }
.mb-cta.is-style-dark .mb-cta__title, .mb-cta.is-style-dark .mb-cta__lead { color: #fff; }

/* Features — minimal */
.mb-feat.is-style-minimal .mb-feat__card { background: transparent; border: none; box-shadow: none; padding: 0; }

/* Features — numbered */
.mb-feat.is-style-numbered .mb-feat__card { counter-increment: mb-feat; position: relative; padding-left: 60px; }
.mb-feat.is-style-numbered .mb-feat__card::before {
	content: counter(mb-feat, decimal-leading-zero);
	position: absolute; left: 0; top: 0;
	font-size: 2.5rem; font-weight: 800; color: var(--mp-primary);
	line-height: 1;
}
.mb-feat.is-style-numbered .mb-feat__card .mb-feat__icon { display: none; }

/* Testimonials — quote (large single quote) */
.mb-test.is-style-quote { text-align: center; padding: 60px 24px; }
.mb-test.is-style-quote .mb-test__grid { display: block; }
.mb-test.is-style-quote .mb-test__card { max-width: 800px; margin: 0 auto; text-align: center; font-size: 1.5rem; line-height: 1.5; }
.mb-test.is-style-quote .mb-test__card .mb-test__quote { font-size: inherit; }

/* Testimonials — compact */
.mb-test.is-style-compact .mb-test__card { padding: 16px; font-size: 14px; }

/* Pricing — borderless */
.mb-pr.is-style-borderless .mb-pr__card { border: none; background: transparent; box-shadow: none; padding: 24px 0; }

/* Pricing — compact */
.mb-pr.is-style-compact .mb-pr__card { padding: 20px; }
.mb-pr.is-style-compact .mb-pr__price { font-size: 2rem; }

/* Stats — light */
.mb-stat.is-style-light { background: var(--wp--preset--color--bg, #fff); color: var(--wp--preset--color--text, #1a1a1a); }
.mb-stat.is-style-light .mb-stat__num { color: var(--mp-primary); }

/* Stats — gradient */
.mb-stat.is-style-gradient {
	background: linear-gradient(135deg, var(--mp-primary), var(--mp-accent));
	color: #fff;
}
.mb-stat.is-style-gradient .mb-stat__num { color: #fff; }

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
	.mb-hero__bg { animation: none !important; }
	.mb-stat__num { transition: none !important; }
	.mega-hover img, .wp-block-image img { transition: none !important; transform: none !important; }
}