/**
 * Front page v4 — design refresh matching reference mockups the site owner
 * supplied (hero, popular courses, "why learn with us" + sample dashboard,
 * testimonials, YouTube). Loaded only on the front page (see inc/enqueue.php).
 *
 * Same isolation principle as v2/v3: every class here is prefixed
 * `.vc-h4-` so restoring an older homepage design is just swapping which
 * front-page.php + stylesheet pair is enqueued, with zero CSS cleanup.
 *
 * Colour palette reuses the theme's own existing tokens throughout
 * (--vc-navy, --vc-primary, --vc-accent, --vc-icon-*-bg) rather than
 * introducing new raw hex values, except for two accent hues (teal, pink)
 * the token set doesn't carry — used only for the "why learn" checklist's
 * icon variety and declared as one-off values right where they're used.
 *
 * @package VCourse
 */

/* ===============================================================
 * Shared: hand-written-style annotations (Caveat, loaded in inc/enqueue.php)
 * ============================================================= */

.vc-h4-annotation {
	font-family: "Caveat", cursive;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.15;
	color: var(--vc-primary);
	position: absolute;
}

/* ===============================================================
 * Hero
 * ============================================================= */

.vc-h4-hero {
	position: relative;
	isolation: isolate;
	padding: var(--vc-space-6) 0 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 80% 25%, rgba(37, 99, 235, 0.14) 0%, transparent 28%),
		radial-gradient(circle at 10% 15%, rgba(37, 99, 235, 0.08) 0%, transparent 22%),
		linear-gradient(180deg, #f9fbff 0%, #edf5ff 100%);
}

.vc-h4-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	align-items: center;
	gap: var(--vc-space-7);
	padding-bottom: var(--vc-space-6);
}

.vc-h4-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--vc-space-2);
	color: var(--vc-primary-dark);
	font-weight: 800;
	font-size: var(--vc-text-xs);
	letter-spacing: var(--vc-tracking-wider);
	text-transform: uppercase;
	background: var(--vc-icon-blue-bg);
	border: 1px solid var(--vc-primary-border);
	padding: 8px 14px;
	border-radius: var(--vc-radius-pill);
}

.vc-h4-hero__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vc-primary); }

.vc-h4-hero__title {
	font-size: clamp(1.7rem, 3.4vw, 2.9rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: var(--vc-space-4) 0;
	color: var(--vc-heading);
}

.vc-h4-hero__title span { color: var(--vc-primary); }

.vc-h4-hero__subtitle { font-size: var(--vc-text-lg); color: #52617b; max-width: 620px; }

.vc-h4-hero__perks { display: flex; flex-wrap: wrap; gap: var(--vc-space-4); margin-top: var(--vc-space-5); }

.vc-h4-hero__perk { display: flex; align-items: center; gap: var(--vc-space-2); font-size: var(--vc-text-sm); font-weight: 700; color: var(--vc-heading); }

.vc-h4-hero__perk-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--vc-radius-md);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.vc-h4-hero__perk-icon svg { width: 18px; height: 18px; }

.vc-h4-hero__perk-icon--blue { background: var(--vc-icon-blue-bg); } .vc-h4-hero__perk-icon--blue svg { fill: var(--vc-primary); }
.vc-h4-hero__perk-icon--green { background: var(--vc-icon-green-bg); } .vc-h4-hero__perk-icon--green svg { fill: var(--vc-success); }
.vc-h4-hero__perk-icon--purple { background: var(--vc-icon-purple-bg); } .vc-h4-hero__perk-icon--purple svg { fill: var(--vc-secondary); }
.vc-h4-hero__perk-icon--orange { background: var(--vc-icon-amber-bg); } .vc-h4-hero__perk-icon--orange svg { fill: var(--vc-accent); }

.vc-h4-hero__cta { display: flex; gap: var(--vc-space-3); flex-wrap: wrap; margin-top: var(--vc-space-6); }

.vc-h4-hero__social { display: flex; align-items: center; gap: var(--vc-space-3); margin-top: var(--vc-space-6); }

.vc-h4-hero__avatars { display: flex; flex-shrink: 0; }

.vc-h4-hero__avatars span {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--vc-white);
	background: var(--vc-gradient-brand);
	color: var(--vc-white);
	font-size: 0.66rem;
	font-weight: 800;
	margin-left: -10px;
	box-shadow: var(--vc-shadow-sm);
}

.vc-h4-hero__avatars span:first-child { margin-left: 0; }
.vc-h4-hero__avatars span:last-child { background: var(--vc-surface-alt); color: var(--vc-text-muted); }

.vc-h4-hero__social p { font-size: var(--vc-text-sm); color: var(--vc-text-muted); line-height: 1.35; }
.vc-h4-hero__social strong { color: var(--vc-heading); }

/* --- Visual stage --- */

.vc-h4-hero__stage { position: relative; min-height: 500px; display: grid; place-items: center; }

.vc-h4-hero__blob {
	position: absolute;
	inset: 6% 4%;
	background: linear-gradient(135deg, #4d9cff, #1e6fff);
	border-radius: 44% 56% 61% 39% / 45% 40% 60% 55%;
	opacity: 0.9;
}

.vc-h4-hero__annotation { top: -6px; right: 6%; text-align: right; transform: rotate(-4deg); }

/*
 * A real transparent-background cutout photo, not a cropped rectangular one
 * — no frame/box/crop here. It sits directly over the blob shape with a
 * drop-shadow for grounding, the way a cutout naturally reads.
 */
.vc-h4-hero__photo-wrap {
	position: relative;
	width: min(430px, 94%);
	display: flex;
	justify-content: center;
}

.vc-h4-hero__photo {
	width: 100%;
	max-height: 560px;
	height: auto;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 25px 35px rgba(14, 44, 91, 0.28));
}

.vc-h4-float {
	position: absolute;
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	background: var(--vc-white);
	border-radius: var(--vc-radius-lg);
	padding: var(--vc-space-3) var(--vc-space-4);
	box-shadow: var(--vc-shadow-lg);
	max-width: 210px;
}

.vc-h4-float__icon {
	width: 40px;
	height: 40px;
	border-radius: var(--vc-radius-md);
	display: grid;
	place-items: center;
	background: var(--vc-icon-blue-bg);
	flex-shrink: 0;
}

.vc-h4-float__icon svg { width: 20px; height: 20px; fill: var(--vc-primary); }
.vc-h4-float__icon--purple { background: var(--vc-icon-purple-bg); } .vc-h4-float__icon--purple svg { fill: var(--vc-secondary); }
.vc-h4-float__icon--green { background: var(--vc-icon-green-bg); } .vc-h4-float__icon--green svg { fill: var(--vc-success); }

.vc-h4-float strong { display: block; font-size: 0.82rem; font-weight: 800; color: var(--vc-heading); }
.vc-h4-float span { display: block; font-size: 0.68rem; color: var(--vc-text-muted); font-weight: 600; }

.vc-h4-float__arrow {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--vc-icon-blue-bg);
	flex-shrink: 0;
	margin-left: auto;
}

.vc-h4-float__arrow svg { width: 11px; height: 11px; fill: var(--vc-primary); }

.vc-h4-float--one { top: 8%; left: -4%; }
.vc-h4-float--two { right: -6%; top: 40%; }
.vc-h4-float--three { right: 4%; bottom: 4%; }

@media (max-width: 1100px) {
	.vc-h4-float--one { left: 0; }
	.vc-h4-float--two { right: 0; }
}

/* --- Bottom trust bar --- */

.vc-h4-hero__bar {
	position: relative;
	z-index: 1;
	background: var(--vc-white);
	border-top: 1px solid var(--vc-border);
}

.vc-h4-hero__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-4);
	padding-block: var(--vc-space-4);
}

.vc-h4-hero__bar-trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-space-3); font-size: var(--vc-text-sm); }
.vc-h4-hero__bar-trust strong { color: var(--vc-heading); font-weight: 800; }
.vc-h4-hero__bar-stars svg { width: 14px; height: 14px; fill: var(--vc-accent); }
.vc-h4-hero__bar-ratingval { color: var(--vc-text-muted); font-weight: 700; }

.vc-h4-hero__bar-items { display: flex; flex-wrap: wrap; gap: var(--vc-space-5); }
.vc-h4-hero__bar-items span { display: flex; align-items: center; gap: 7px; font-size: var(--vc-text-sm); font-weight: 700; color: var(--vc-heading); }
.vc-h4-hero__bar-items svg { width: 17px; height: 17px; fill: var(--vc-primary); }

/* Perk description subtext, decorative squiggles/arrow and the
   mobile-first-fold stat grid / CTA — all hidden on desktop by default,
   revealed only inside the ≤900px breakpoint below so the desktop hero is
   left pixel-identical. */
.vc-h4-hero__perk > div { display: flex; flex-direction: column; gap: 1px; }
.vc-h4-hero__perk small { display: none; font-size: var(--vc-text-xs); font-weight: 600; color: var(--vc-text-muted); }
.vc-h4-hero__stats-mobile { display: none; }
.vc-h4-hero__perks-mobile { display: none; }
.vc-h4-hero__cta-mobile { display: none; }
.vc-h4-hero__badge-mobile { display: none; }
.vc-h4-hero__dash-arrow,
.vc-h4-hero__squiggle { display: none; position: absolute; }

.vc-h4-hero__stat-tile-icon--blue { background: var(--vc-icon-blue-bg); } .vc-h4-hero__stat-tile-icon--blue svg { fill: var(--vc-primary); }
.vc-h4-hero__stat-tile-icon--green { background: var(--vc-icon-green-bg); } .vc-h4-hero__stat-tile-icon--green svg { fill: var(--vc-success); }
.vc-h4-hero__stat-tile-icon--amber { background: var(--vc-icon-amber-bg); } .vc-h4-hero__stat-tile-icon--amber svg { fill: var(--vc-accent); }
.vc-h4-hero__stat-tile-icon--purple { background: var(--vc-icon-purple-bg); } .vc-h4-hero__stat-tile-icon--purple svg { fill: var(--vc-secondary); }

/*
 * Mobile first-fold hero — rebuilt to match the site owner's reference
 * layout exactly: text column + a SMALL, COMPACT photo column side by
 * side (not a full-width photo stacked above the text), with the stat
 * tiles / single CTA / checkmarks spanning full width underneath.
 */
@media (max-width: 900px) {
	/* Remove the gap between the header and the hero's first-fold content. */
	.vc-h4-hero { padding-top: var(--vc-space-3); }

	.vc-h4-hero__grid {
		grid-template-columns: 1.05fr 1fr;
		align-items: start;
		gap: var(--vc-space-3);
		text-align: left;
		padding-bottom: 0;
	}
	.vc-h4-hero__subtitle { margin-inline: 0; font-size: 0.8rem; }
	.vc-h4-hero__title { font-size: clamp(1.05rem, 5vw, 1.3rem); margin: 0 0 var(--vc-space-3); }

	/* Badge moves out of the text column to sit full-width above the whole
	   grid, and the heading shifts up to take its place in the column. */
	.vc-h4-hero__badge-desktop { display: none; }
	.vc-h4-hero__badge-mobile {
		display: flex;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		font-size: 0.58rem;
		padding: 6px 10px;
		margin-bottom: var(--vc-space-3);
	}

	/* The in-column perks row is replaced on mobile by a full-width grid
	   below the photo (.vc-h4-hero__perks-mobile) so each cell gets the
	   full page width to breathe, 2 per row, instead of being squeezed
	   into just the text column. */
	.vc-h4-hero__perks { display: none; }

	.vc-h4-hero__perks-mobile {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--vc-space-4) var(--vc-space-3);
		margin-top: var(--vc-space-2);
	}
	.vc-h4-hero__perks-mobile .vc-h4-hero__perk { flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; }
	.vc-h4-hero__perks-mobile .vc-h4-hero__perk small { display: block; }
	.vc-h4-hero__perks-mobile .vc-h4-hero__perk strong { font-size: 0.85rem; }
	.vc-h4-hero__perks-mobile .vc-h4-hero__perk small { font-size: 0.72rem; }
	.vc-h4-hero__perks-mobile .vc-h4-hero__perk-icon { width: 26px; height: 26px; }
	.vc-h4-hero__perks-mobile .vc-h4-hero__perk-icon svg { width: 13px; height: 13px; }

	.vc-h4-hero__cta { display: none; }
	.vc-h4-hero__social { display: none; }

	/* Small, compact photo — a fixed, modest-height box sized close to the
	   photo's own aspect ratio (not stretched to match the text column's
	   full height), matching the site owner's request to make the person
	   photo small and compact on mobile without leaving big blank margins
	   above/below it that the floating cards would float over instead of
	   the photo itself. */
	.vc-h4-hero__stage { position: relative; min-height: 0; height: 235px; display: block; margin-top: var(--vc-space-2); }
	.vc-h4-hero__blob { inset: 4% 4%; }
	.vc-h4-hero__photo-wrap { width: 100%; height: 100%; position: absolute; inset: 0; display: block; }
	.vc-h4-hero__photo { width: 100%; height: 100%; max-height: none; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(14, 44, 91, 0.22)); }
	.vc-h4-hero__annotation { display: none; }

	.vc-h4-hero__dash-arrow { display: block; width: 20%; top: -8%; left: 2%; z-index: 2; }
	.vc-h4-hero__squiggle { display: block; width: 5px; }
	.vc-h4-hero__squiggle--one { top: 8%; left: 0; }
	.vc-h4-hero__squiggle--two { top: 42%; right: 2%; }
	.vc-h4-hero__squiggle--three { bottom: 10%; right: 0; }

	/* Small edge-anchored cards — enough overlap on the photo to read as
	   floating UI over it, but small enough that they don't cover the
	   person's face/body. */
	.vc-h4-float { max-width: 90px; padding: 4px 5px; gap: 3px; border-radius: var(--vc-radius-sm, 8px); box-shadow: var(--vc-shadow-md, var(--vc-shadow-lg)); z-index: 3; }
	.vc-h4-float__icon { width: 17px; height: 17px; }
	.vc-h4-float__icon svg { width: 8px; height: 8px; }
	.vc-h4-float strong { font-size: 0.44rem; }
	.vc-h4-float span { font-size: 0.36rem; }
	.vc-h4-float__arrow { width: 10px; height: 10px; }
	.vc-h4-float__arrow svg { width: 5px; height: 5px; }
	.vc-h4-float--one { left: -8%; top: 2%; }
	.vc-h4-float--two { right: -10%; top: 40%; }
	.vc-h4-float--three { right: -8%; bottom: 2%; }

	/* The floating WhatsApp button collides with the hero's own floating
	   cards on narrow screens — hidden in the hero's mobile view only
	   (this stylesheet loads on the homepage only, so other pages and
	   desktop keep it). */
	.vc-whatsapp-float { display: none; }

	/* Always one row of 4 (not a 2x2 wrap) at every mobile width, matching
	   the reference layout. */
	.vc-h4-hero__stats-mobile {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 4px;
		margin-top: var(--vc-space-5);
		padding: 10px 6px;
		background: #fff;
		border: 1px solid var(--vc-border);
		border-radius: var(--vc-radius-lg);
		box-shadow: var(--vc-shadow-sm);
	}
	.vc-h4-hero__stat-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
	.vc-h4-hero__stat-tile-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1px; }
	.vc-h4-hero__stat-tile-icon svg { width: 12px; height: 12px; }
	.vc-h4-hero__stat-tile strong { font-size: 0.66rem; font-weight: 900; color: var(--vc-heading); line-height: 1.1; white-space: nowrap; }
	.vc-h4-hero__stat-tile span { font-size: 0.42rem; color: var(--vc-text-muted); font-weight: 600; line-height: 1.15; }

	/* Two buttons side by side, styled like the site's own sticky mobile
	   CTA bar (.vc-mobile-cta / .vc-btn--sm) — small rounded-rect buttons,
	   not an oversized full-width pill. */
	.vc-h4-hero__cta-mobile { display: flex; gap: var(--vc-space-2); margin-top: var(--vc-space-4); }
	.vc-h4-hero__cta-mobile-btn {
		flex: 1 1 0;
		display: flex; align-items: center; justify-content: center; gap: 5px;
		background: var(--vc-primary); color: #fff; font-weight: 600; font-size: 0.75rem;
		padding: 0.32rem 0.8rem; border-radius: var(--vc-radius-sm);
		border: 2px solid transparent;
		box-shadow: var(--vc-shadow-md);
		white-space: nowrap;
	}
	.vc-h4-hero__cta-mobile-btn svg { width: 12px; height: 12px; fill: #fff; flex-shrink: 0; }
	.vc-h4-hero__cta-mobile-btn--outline {
		background: transparent; color: var(--vc-primary); border-color: var(--vc-primary);
		box-shadow: none;
	}

	/* The bottom trust bar duplicates what the new stat grid above already
	   shows (student count + rating) — hide it on mobile to avoid repeating
	   the same numbers twice on one screen. Desktop is untouched. */
	.vc-h4-hero__bar { display: none; }
}


/* ===============================================================
 * Section head (shared: courses / live classes / testimonials)
 * ============================================================= */

.vc-h4-head {
	display: flex;
	justify-content: space-between;
	gap: var(--vc-space-4);
	align-items: flex-end;
	margin-bottom: var(--vc-space-6);
}

.vc-h4-head--center { justify-content: center; text-align: center; position: relative; }
.vc-h4-head--center > div { max-width: 640px; }

.vc-h4-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--vc-icon-blue-bg);
	color: var(--vc-primary-dark);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: var(--vc-tracking-wide);
	text-transform: uppercase;
	padding: 7px 13px;
	border-radius: var(--vc-radius-pill);
	margin-bottom: var(--vc-space-3);
}

.vc-h4-badge-pill svg { width: 13px; height: 13px; fill: currentColor; }

.vc-h4-kicker {
	font-size: var(--vc-text-xs);
	color: var(--vc-primary);
	font-weight: 900;
	letter-spacing: var(--vc-tracking-wider);
	text-transform: uppercase;
}

.vc-h4-head h2, .vc-yt .vc-section-title {
	font-size: clamp(1.6rem, 2.4vw, 2.3rem);
	letter-spacing: -0.03em;
	color: var(--vc-heading);
	line-height: 1.1;
}

.vc-h4-head h2 span, .vc-yt .vc-section-title span { color: var(--vc-primary); }

.vc-h4-lead { max-width: 620px; color: var(--vc-text-muted); margin-top: var(--vc-space-2); }
.vc-h4-head--center .vc-h4-lead { margin-inline: auto; }

.vc-h4-textlink { font-weight: 800; color: var(--vc-primary); font-size: var(--vc-text-sm); white-space: nowrap; }

@media (max-width: 640px) {
	.vc-h4-head:not(.vc-h4-head--center) { flex-direction: column; align-items: flex-start; }
}

/* Moved to content.css — this card design is now shared by the front page
 * and the course listing pages (archive-vcourse_course.php,
 * taxonomy-course_category.php). See the "Popular Courses" section there. */


/* ===============================================================
 * Why Learn With Us — split panel + sample dashboard
 * ============================================================= */

.vc-h4-why { background: var(--vc-light); }

.vc-h4-why__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vc-space-6); align-items: stretch; }

.vc-h4-why__panel-v2 {
	position: relative;
	display: flex;
	border-radius: var(--vc-radius-2xl);
	overflow: hidden;
	background:
		radial-gradient(circle at 15% 15%, rgba(57, 199, 255, 0.16), transparent 30%),
		var(--vc-gradient-primary);
	box-shadow: 0 25px 60px rgba(6, 27, 61, 0.18);
}

.vc-h4-why__panel-content { flex: 1.15; padding: var(--vc-space-6); color: var(--vc-white); }

.vc-h4-why__kicker { color: #7bdfff; }

.vc-h4-why__panel-content h3 {
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: var(--vc-space-3) 0;
	color: var(--vc-white);
}

.vc-h4-why__panel-content h3 span { color: #5ecbff; }
.vc-h4-why__panel-content p { color: #c4d1e6; font-size: var(--vc-text-sm); }

.vc-h4-why__checks-v2 { display: grid; gap: var(--vc-space-3); margin: var(--vc-space-5) 0 0; }
.vc-h4-why__checks-v2 span { display: flex; gap: var(--vc-space-3); align-items: center; font-size: 0.83rem; font-weight: 650; }

.vc-h4-why__check-icon {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.vc-h4-why__check-icon svg { width: 13px; height: 13px; fill: #fff; }
.vc-h4-why__check-icon--teal { background: #14b8a6; }
.vc-h4-why__check-icon--purple { background: #7c5cff; }
.vc-h4-why__check-icon--blue { background: #2d86ff; }
.vc-h4-why__check-icon--orange { background: #f0883e; }
.vc-h4-why__check-icon--pink { background: #ec5990; }

/* Transparent cutout, not a cropped photo box — the person stands directly
 * on the panel's own gradient, feet aligned to the panel's bottom edge. */
.vc-h4-why__panel-photo {
	position: relative;
	flex: 0.9;
	min-height: 260px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-top: var(--vc-space-6);
}

.vc-h4-why__photo-img {
	width: 100%;
	max-width: 260px;
	height: auto;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 20px 30px rgba(3, 12, 28, 0.4));
}

.vc-h4-why__annotation { top: 14px; right: 14px; left: auto; color: #fff; text-align: right; transform: rotate(4deg); }

.vc-h4-why__photo-badge {
	position: absolute;
	left: var(--vc-space-3);
	bottom: var(--vc-space-5);
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 165px;
	background: rgba(6, 20, 45, 0.72);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 9px 11px;
	border-radius: var(--vc-radius-md);
}

.vc-h4-why__photo-badge svg { width: 16px; height: 16px; fill: #8edfff; flex-shrink: 0; }

.vc-h4-dashboard-v2 {
	position: relative;
	background: var(--vc-white);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-2xl);
	padding: var(--vc-space-6);
	box-shadow: var(--vc-shadow-md);
}

.vc-h4-dashboard-v2__annotation { top: -30px; right: 4%; text-align: right; transform: rotate(3deg); }

.vc-h4-dashboard-v2__head h4 { font-size: var(--vc-text-lg); color: var(--vc-heading); }
.vc-h4-dashboard-v2__head p { font-size: 0.78rem; color: var(--vc-text-muted); margin-top: 3px; }

.vc-h4-dashboard-v2__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vc-space-3); margin-top: var(--vc-space-5); }

.vc-h4-dashboard-v2__stat {
	position: relative;
	padding: var(--vc-space-3);
	background: var(--vc-light);
	border-radius: var(--vc-radius-md);
}

.vc-h4-dashboard-v2__stat-icon {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	margin-bottom: 6px;
}

.vc-h4-dashboard-v2__stat-icon svg { width: 13px; height: 13px; }
.vc-h4-dashboard-v2__stat-icon--blue { background: var(--vc-icon-blue-bg); } .vc-h4-dashboard-v2__stat-icon--blue svg { fill: var(--vc-primary); }
.vc-h4-dashboard-v2__stat-icon--purple { background: var(--vc-icon-purple-bg); } .vc-h4-dashboard-v2__stat-icon--purple svg { fill: var(--vc-secondary); }
.vc-h4-dashboard-v2__stat-icon--green { background: var(--vc-icon-green-bg); } .vc-h4-dashboard-v2__stat-icon--green svg { fill: var(--vc-success); }
.vc-h4-dashboard-v2__stat-icon--amber { background: var(--vc-icon-amber-bg); } .vc-h4-dashboard-v2__stat-icon--amber svg { fill: var(--vc-accent); }

.vc-h4-dashboard-v2__stat small { display: block; color: var(--vc-text-muted); font-size: 0.66rem; font-weight: 700; }
.vc-h4-dashboard-v2__stat strong { display: block; font-size: var(--vc-text-lg); color: var(--vc-heading); margin-top: 2px; font-variant-numeric: tabular-nums; }

.vc-h4-dashboard-v2__chart { position: relative; margin-top: var(--vc-space-5); }
.vc-h4-dashboard-v2__chart svg { width: 100%; height: 120px; display: block; }

.vc-h4-dashboard-v2__months { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.62rem; color: var(--vc-text-faint); font-weight: 700; }

.vc-h4-dashboard-v2__callout {
	position: absolute;
	top: -6px;
	right: 0;
	background: var(--vc-primary);
	color: var(--vc-white);
	font-size: 0.66rem;
	font-weight: 800;
	padding: 4px 9px;
	border-radius: var(--vc-radius-sm);
}

.vc-h4-dashboard-v2__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--vc-space-5);
	background: var(--vc-icon-green-bg);
	color: #0c8f61;
	font-size: 0.72rem;
	font-weight: 800;
	padding: 8px 12px;
	border-radius: var(--vc-radius-pill);
}

.vc-h4-dashboard-v2__tag svg { width: 13px; height: 13px; fill: currentColor; }

@media (max-width: 900px) {
	.vc-h4-why__split { grid-template-columns: 1fr; }
	.vc-h4-why__panel-v2 { flex-direction: column; }
	.vc-h4-why__panel-photo { min-height: 220px; }
	.vc-h4-dashboard-v2__annotation, .vc-h4-why__annotation { display: none; }
}

/* ===============================================================
 * Live classes — split (unchanged from v4.0)
 * ============================================================= */

.vc-h4-live__wrap { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--vc-space-6); align-items: stretch; }

.vc-h4-live__card {
	background:
		radial-gradient(circle at 90% 15%, rgba(57, 199, 255, 0.2), transparent 28%),
		var(--vc-gradient-primary);
	border-radius: var(--vc-radius-2xl);
	color: var(--vc-white);
	padding: var(--vc-space-6);
}

.vc-h4-live__pill {
	display: inline-flex;
	gap: var(--vc-space-2);
	align-items: center;
	color: #cfe5ff;
	font-size: 0.68rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.vc-h4-live__pill span { width: 8px; height: 8px; background: #ff4d4d; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 77, 77, 0.1); }

.vc-h4-live__card h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.03em; line-height: 1.1; max-width: 480px; margin-top: var(--vc-space-3); color: var(--vc-white); }
.vc-h4-live__card p { color: #c8d6e9; max-width: 480px; margin-top: var(--vc-space-2); }

.vc-h4-live__features { display: flex; gap: var(--vc-space-3); flex-wrap: wrap; margin-top: var(--vc-space-5); }
.vc-h4-live__features div { border: 1px solid rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.06); border-radius: var(--vc-radius-md); padding: 9px 12px; font-size: 0.7rem; font-weight: 800; }

.vc-h4-includes { background: var(--vc-white); border: 1px solid var(--vc-border); border-radius: var(--vc-radius-2xl); padding: var(--vc-space-6); }
.vc-h4-includes h3 { font-size: var(--vc-text-xl); color: var(--vc-heading); margin-bottom: var(--vc-space-4); }
.vc-h4-includes__item { display: flex; gap: var(--vc-space-3); padding: var(--vc-space-3) 0; border-bottom: 1px solid var(--vc-border); }
.vc-h4-includes__item:last-child { border-bottom: none; }

.vc-h4-includes__icon { width: 40px; height: 40px; border-radius: var(--vc-radius-md); background: var(--vc-icon-blue-bg); display: grid; place-items: center; flex-shrink: 0; }
.vc-h4-includes__icon svg { width: 18px; height: 18px; fill: var(--vc-primary); }
.vc-h4-includes__item strong { display: block; font-size: var(--vc-text-sm); color: var(--vc-heading); }
.vc-h4-includes__item small { color: var(--vc-text-muted); display: block; margin-top: 2px; font-size: 0.72rem; }

@media (max-width: 900px) {
	.vc-h4-live__wrap { grid-template-columns: 1fr; }
}

/* ===============================================================
 * YouTube — head/visual, grid, subscribe bar
 * ============================================================= */

.vc-yt {
	position: relative;
	background:
		radial-gradient(circle, rgba(37, 99, 235, 0.14) 1.5px, transparent 1.5px) 0 0 / 22px 22px,
		linear-gradient(180deg, var(--vc-light) 0%, var(--vc-white) 100%);
}

.vc-h4-yt-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--vc-space-6); align-items: center; margin-bottom: var(--vc-space-6); }

.vc-h4-yt-hero__perks { display: flex; flex-wrap: wrap; gap: var(--vc-space-4); margin-top: var(--vc-space-4); }
.vc-h4-yt-hero__perks div { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; color: var(--vc-heading); }

.vc-h4-yt-hero__perk-icon {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	background: var(--vc-icon-blue-bg);
	flex-shrink: 0;
}

.vc-h4-yt-hero__perk-icon svg { width: 15px; height: 15px; fill: var(--vc-primary); }

.vc-h4-yt-hero__visual { position: relative; min-height: 300px; display: grid; place-items: center; }

.vc-h4-yt-hero__annotation { top: -10px; left: 0; transform: rotate(-6deg); }

/* Transparent cutout, not a cropped photo box — floats over the red
 * YouTube-mark badge (behind it, drawn first) with a drop-shadow. */
.vc-h4-yt-hero__photo-wrap {
	position: relative;
	width: min(300px, 90%);
	display: flex;
	justify-content: center;
}

.vc-h4-yt-hero__photo {
	position: relative;
	z-index: 1;
	width: 100%;
	max-height: 420px;
	height: auto;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 20px 28px rgba(14, 44, 91, 0.3));
}

.vc-h4-yt-hero__playmark {
	position: absolute;
	inset: auto auto 24px 14px;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: #ff1d2e;
	display: grid;
	place-items: center;
	box-shadow: 0 10px 22px rgba(255, 29, 46, 0.4);
	z-index: 0;
}

.vc-h4-yt-hero__playmark svg { width: 22px; height: 22px; fill: #fff; }

.vc-h4-yt-hero__stats {
	position: absolute;
	right: -6%;
	top: 10%;
	background: var(--vc-white);
	border-radius: var(--vc-radius-lg);
	box-shadow: var(--vc-shadow-lg);
	padding: var(--vc-space-3);
	display: grid;
	gap: var(--vc-space-2);
}

.vc-h4-yt-hero__stats > div { display: flex; align-items: center; gap: 10px; }

.vc-h4-yt-hero__stat-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.vc-h4-yt-hero__stat-icon svg { width: 14px; height: 14px; }
.vc-h4-yt-hero__stat-icon--pink { background: #fde3ec; } .vc-h4-yt-hero__stat-icon--pink svg { fill: #ec5990; }
.vc-h4-yt-hero__stat-icon--red { background: #ffe1e2; } .vc-h4-yt-hero__stat-icon--red svg { fill: #ff1d2e; }

.vc-h4-yt-hero__stats strong { display: block; font-size: 0.82rem; font-weight: 800; color: var(--vc-heading); line-height: 1.1; }
.vc-h4-yt-hero__stats span { display: block; font-size: 0.62rem; color: var(--vc-text-muted); font-weight: 700; }

.vc-h4-yt-hero__tag2 { bottom: 0; right: -4%; text-align: right; transform: rotate(2deg); color: var(--vc-navy); }

@media (max-width: 900px) {
	.vc-h4-yt-hero { grid-template-columns: 1fr; text-align: center; }
	.vc-h4-yt-hero__perks { justify-content: center; }
	.vc-h4-yt-hero__visual { order: -1; margin-bottom: var(--vc-space-4); }
	.vc-h4-yt-hero__annotation, .vc-h4-yt-hero__tag2 { display: none; }
	.vc-h4-yt-hero__stats { right: 0; }
}

.vc-yt__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vc-space-5); }

@media (max-width: 900px) { .vc-yt__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vc-yt__grid { grid-template-columns: 1fr; } }

.vc-yt-card { background: var(--vc-white); border: 1px solid var(--vc-border); border-radius: var(--vc-radius-lg); box-shadow: var(--vc-shadow-sm); }
.vc-yt-card:hover { box-shadow: var(--vc-shadow-lg); }
.vc-yt-card__media { border-radius: var(--vc-radius-lg) var(--vc-radius-lg) 0 0; overflow: hidden; }
.vc-yt-card__media img { transition: transform var(--vc-duration-slow) var(--vc-ease-out); }
.vc-yt-card:hover .vc-yt-card__media img { transform: scale(1.08); }
.vc-yt-card__play svg { width: 20px; height: 20px; padding: 14px 16px; transition: transform var(--vc-duration) var(--vc-ease-out); }
.vc-yt-card:hover .vc-yt-card__play svg { transform: scale(1.1); }

.vc-yt-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	padding: var(--vc-space-3) var(--vc-space-4) var(--vc-space-4);
	font-size: var(--vc-text-sm);
	font-weight: 700;
	line-height: var(--vc-leading-snug);
	color: var(--vc-heading);
	text-align: left;
}

.vc-h4-yt-subscribe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-4);
	margin-top: var(--vc-space-6);
	background: var(--vc-white);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-xl);
	padding: var(--vc-space-5);
}

.vc-h4-yt-subscribe__lead { display: flex; align-items: center; gap: var(--vc-space-3); }

.vc-h4-yt-subscribe__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--vc-radius-md);
	display: grid;
	place-items: center;
	background: #ffe1e2;
	flex-shrink: 0;
}

.vc-h4-yt-subscribe__icon svg { width: 22px; height: 22px; fill: #ff1d2e; }
.vc-h4-yt-subscribe__lead strong { display: block; font-size: var(--vc-text-base); color: var(--vc-heading); }
.vc-h4-yt-subscribe__lead span { display: block; font-size: 0.78rem; color: var(--vc-text-muted); }

.vc-h4-yt-subscribe__perks { display: flex; flex-wrap: wrap; gap: var(--vc-space-4); }
.vc-h4-yt-subscribe__perks span { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; color: var(--vc-heading); }
.vc-h4-yt-subscribe__perks svg { width: 15px; height: 15px; fill: var(--vc-primary); }

@media (max-width: 760px) {
	.vc-h4-yt-subscribe { flex-direction: column; align-items: flex-start; }
}

/* ===============================================================
 * Testimonials — quote-badge cards (scoped restyle of the shared
 * .vc-testimonial component; base rules stay in components.css)
 * ============================================================= */

.vc-h4-testimonials-section__annotation { position: static; display: block; margin-top: var(--vc-space-2); text-align: center; }

.vc-h4-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vc-space-6); margin-top: var(--vc-space-6); }

.vc-h4-testimonials__grid .vc-testimonial { position: relative; overflow: visible; }

.vc-h4-testimonials__grid .vc-testimonial::before {
	content: "\201C";
	position: absolute;
	top: -16px;
	left: var(--vc-space-5);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--vc-primary);
	color: var(--vc-white);
	font-size: 1.3rem;
	line-height: 34px;
	text-align: center;
	font-family: Georgia, serif;
	box-shadow: 0 8px 16px rgba(37, 99, 235, 0.35);
}

.vc-h4-testimonials__grid .vc-testimonial::after {
	content: "\201D";
	position: absolute;
	right: var(--vc-space-4);
	bottom: var(--vc-space-3);
	font-size: 3.5rem;
	font-family: Georgia, serif;
	color: var(--vc-border);
	line-height: 1;
	z-index: 0;
}

@media (max-width: 860px) {
	.vc-h4-testimonials__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* ===============================================================
 * Closing CTA (unchanged from v4.0)
 * ============================================================= */

.vc-h4-cta__wrap { padding-block: var(--vc-space-6) var(--vc-space-7); }

.vc-h4-cta {
	position: relative;
	border-radius: var(--vc-radius-2xl);
	padding: var(--vc-space-7);
	color: var(--vc-white);
	background:
		radial-gradient(circle at 85% 20%, rgba(62, 207, 255, 0.25), transparent 26%),
		linear-gradient(125deg, #0a2250, var(--vc-primary));
	display: flex;
	justify-content: space-between;
	gap: var(--vc-space-7);
	align-items: center;
	overflow: hidden;
}

.vc-h4-cta__kicker { color: #8edfff; }
.vc-h4-cta h2 { color: var(--vc-white); font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.05; margin-top: 6px; }
.vc-h4-cta p { color: #dce8fa; margin-top: var(--vc-space-2); max-width: 560px; }
.vc-h4-cta__actions { display: flex; gap: var(--vc-space-3); flex-wrap: wrap; flex-shrink: 0; }

@media (max-width: 760px) {
	.vc-h4-cta { flex-direction: column; align-items: flex-start; padding: var(--vc-space-6); }
}