/* ==========================================================================
   TextCRM Powerful Features Widget
   Layout / type from demo-html/features.html:
     - .bento-grid: 12-col grid (8/4 then 6/6)
     - .glass-card: rgba surface + backdrop-filter + soft inset highlight
     - headline-md (30 / 1.3 / -0.02 / 600), body-md, label-sm
   Palette is locked to TextCRM Hero brand tokens (#0b1326 background,
   #00f5a0 accent, white-tinted borders).
   ========================================================================== */

.textcrm-pf {
	position: relative;
	width: 100%;
	background-color: #0b1326;
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #ffffff;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	padding-top: 80px;
	padding-bottom: 80px;
}

.textcrm-pf *,
.textcrm-pf *::before,
.textcrm-pf *::after {
	box-sizing: border-box;
}

.textcrm-pf__inner {
	width: 100%;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */
.textcrm-pf__header {
	text-align: center;
	margin-bottom: 64px;
}

.textcrm-pf__title {
	margin: 0 0 16px;
	font-size: 36px;            /* matches other section widgets (text-4xl) */
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-weight: 700;
	color: #ffffff;
}

.textcrm-pf__title-accent {
	color: #00f5a0;             /* brand green (was text-secondary) */
}

.textcrm-pf__subtitle {
	margin: 0 auto;
	max-width: 576px;           /* max-w-xl */
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: #9ca3af;
}

/* --------------------------------------------------------------------------
   Bento grid · 12-col (8/4 then 6/6 at lg)
   Each card uses brand "glass-card" surface + soft inset highlight.
   -------------------------------------------------------------------------- */
.textcrm-pf__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 24px;
}

.textcrm-pf__card {
	position: relative;
	grid-column: span 12;
	background-color: rgba(15, 23, 42, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;        /* rounded-3xl */
	padding: 32px;
	overflow: hidden;
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	--pf-accent: #00f5a0;
	transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.textcrm-pf__card:hover {
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.08), 0 16px 40px -16px rgba(0, 0, 0, 0.5);
}

.textcrm-pf__card-title {
	margin: 0 0 16px;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: #ffffff;
}

.textcrm-pf__card-title--lg {
	font-size: 30px;            /* headline-md for the featured card */
	line-height: 1.3;
	font-weight: 600;
}

.textcrm-pf__card-desc {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.5;
	color: #9ca3af;
}

/* Card icon chip (top-left of cards) */
.textcrm-pf__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	margin-bottom: 24px;
	color: var(--pf-accent);
	background-color: rgba(0, 245, 160, 0.1);
	border: 1px solid rgba(0, 245, 160, 0.2);
}

.textcrm-pf__icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* Bullet list under the workflows card */
.textcrm-pf__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.textcrm-pf__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #9ca3af;
	font-size: 16px;
	line-height: 1.5;
}

.textcrm-pf__list li + li {
	margin-top: 12px;
}

.textcrm-pf__list-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--pf-accent);
}

.textcrm-pf__list-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* --------------------------------------------------------------------------
   Card 1 · Workflows (8/12 at lg) — two-column body with diagram on the right
   -------------------------------------------------------------------------- */
.textcrm-pf__card-body {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.textcrm-pf__card-text {
	flex: 1;
	min-width: 0;
}

/* Diagram panel — surface-container-low look */
.textcrm-pf__diagram {
	flex: 1;
	min-width: 0;
	background-color: #131b2e;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
}

.textcrm-pf__diagram-inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	max-width: 240px;
}

.textcrm-pf__node {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
	background-color: #222a3d;     /* surface-container-high */
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
	font-size: 12px;
	font-weight: 600;
	color: #ffffff;
	letter-spacing: 0.02em;
}

.textcrm-pf__node--accent {
	background-color: rgba(0, 245, 160, 0.1);
	border-color: rgba(0, 245, 160, 0.3);
	color: var(--pf-accent);
}

.textcrm-pf__node-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--pf-accent);
}

.textcrm-pf__node-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.textcrm-pf__node-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Vertical connector line */
.textcrm-pf__diagram-line {
	width: 1px;
	height: 32px;
	background-color: var(--pf-accent);
	margin: 0 auto;
}

/* U-shaped bracket that splits into two branch nodes */
.textcrm-pf__diagram-branch {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	position: relative;
	min-height: 64px;
	padding-top: 16px;
}

.textcrm-pf__diagram-branch .textcrm-pf__node {
	position: relative;
	z-index: 2;
	margin-top: 32px;
}

.textcrm-pf__diagram-bracket {
	position: absolute;
	left: 18%;
	right: 18%;
	top: 0;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
}

/* --------------------------------------------------------------------------
   Card 2 · Shared Inbox (4/12 at lg)
   -------------------------------------------------------------------------- */
.textcrm-pf__card--inbox {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
}

.textcrm-pf__avatars {
	display: flex;
	margin-top: 8px;
}

.textcrm-pf__avatar {
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #0b1326;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #ffffff;
	background-color: #2d3449;   /* surface-container-highest */
	object-fit: cover;
}

.textcrm-pf__avatar + .textcrm-pf__avatar {
	margin-left: -12px;          /* -space-x-3 */
}

.textcrm-pf__avatar--more {
	background-color: #2d3449;
	color: #ffffff;
}

/* Placeholder avatars — shown until the user uploads a real image.
   Each repeater slot cycles through 3 brand-tinted gradients for visual variety. */
.textcrm-pf__avatar--placeholder {
	color: rgba(255, 255, 255, 0.75);
	overflow: hidden;
}

.textcrm-pf__avatar--placeholder svg {
	width: 60%;
	height: 60%;
	display: block;
	margin: 20% auto 0;            /* sit slightly below center, like a head/shoulder portrait */
}

.textcrm-pf__avatar--ph-1 {
	background-image: linear-gradient(135deg, #00b378 0%, #00f5a0 100%);
	color: #0b1326;
}

.textcrm-pf__avatar--ph-2 {
	background-image: linear-gradient(135deg, #1f2937 0%, #374151 100%);
	color: rgba(255, 255, 255, 0.85);
}

.textcrm-pf__avatar--ph-3 {
	background-image: linear-gradient(135deg, #131b2e 0%, #2d3449 100%);
	color: rgba(0, 245, 160, 0.85);
}

/* --------------------------------------------------------------------------
   Card 3 · Real-time Analytics (6/12 at md)
   -------------------------------------------------------------------------- */
.textcrm-pf__card--analytics {
	display: flex;
	flex-direction: column;
}

.textcrm-pf__analytics-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 32px;
}

.textcrm-pf__analytics-header .textcrm-pf__card-title {
	margin-bottom: 8px;
}

.textcrm-pf__analytics-header .textcrm-pf__card-desc {
	margin-bottom: 0;
}

.textcrm-pf__trend {
	display: inline-flex;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--pf-accent);
}

.textcrm-pf__trend svg {
	width: 100%;
	height: 100%;
	display: block;
}

.textcrm-pf__chart {
	margin-top: auto;
	background-color: #131b2e;   /* surface-container-low */
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	padding: 16px;
}

.textcrm-pf__bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 128px;
}

.textcrm-pf__bar {
	flex: 1 1 0;
	min-width: 0;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	background-color: var(--pf-accent);
	transition: filter 0.3s ease, transform 0.3s ease;
}

/* Step the bar colors with opacity, matching features.html's secondary/N tints */
.textcrm-pf__bar[data-bar-index="1"] { background-color: rgba(0, 245, 160, 0.2); }
.textcrm-pf__bar[data-bar-index="2"] { background-color: rgba(0, 245, 160, 0.4); }
.textcrm-pf__bar[data-bar-index="3"] { background-color: rgba(0, 245, 160, 0.6); }
.textcrm-pf__bar[data-bar-index="4"] { background-color: var(--pf-accent); }
.textcrm-pf__bar[data-bar-index="5"] { background-color: rgba(0, 245, 160, 0.5); }
.textcrm-pf__bar[data-bar-index="6"] { background-color: var(--pf-accent); }

.textcrm-pf__bar.is-glow {
	box-shadow: 0 0 20px rgba(0, 245, 160, 0.4);
}

.textcrm-pf__chart-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #9ca3af;
}

/* --------------------------------------------------------------------------
   Card 4 · No-Code Chatbots (6/12 at md)
   -------------------------------------------------------------------------- */
.textcrm-pf__card--chatbots {
	position: relative;
}

.textcrm-pf__card-content {
	position: relative;
	z-index: 2;
}

.textcrm-pf__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pf-accent);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	font-weight: 600;
	text-decoration: none;
	transition: gap 0.3s ease;
}

.textcrm-pf__link:hover {
	gap: 16px;
}

.textcrm-pf__link-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
}

.textcrm-pf__link-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Decorative bot watermark in the corner */
.textcrm-pf__bot {
	position: absolute;
	top: 32px;
	right: 32px;
	width: 120px;
	height: 120px;
	color: rgba(255, 255, 255, 0.05);
	pointer-events: none;
	z-index: 1;
}

.textcrm-pf__bot svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Soft radial glow in the lower-right of the card */
.textcrm-pf__chatbots-glow {
	position: absolute;
	bottom: -32px;
	right: -32px;
	width: 192px;
	height: 192px;
	border-radius: 9999px;
	background-image: linear-gradient(to bottom right, rgba(0, 245, 160, 0.18), rgba(0, 245, 160, 0.05));
	filter: blur(80px);
	pointer-events: none;
	z-index: 0;
}

/* --------------------------------------------------------------------------
   Stats Row — sits OUTSIDE the inner container so it is naturally full-bleed
   -------------------------------------------------------------------------- */
.textcrm-pf__stats {
	background-color: #060e20;    /* surface-container-lowest */
	margin-top: 80px;
	padding-top: 80px;
	padding-bottom: 80px;
	padding-left: 24px;
	padding-right: 24px;
}

.textcrm-pf__stats-inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

.textcrm-pf__stat {
	text-align: center;
	padding: 24px;
}

.textcrm-pf__stat:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.textcrm-pf__stat-value {
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: #00f5a0;
	margin-bottom: 8px;
}

.textcrm-pf__stat-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #9ca3af;
}

/* --------------------------------------------------------------------------
   Entrance reveal (staggered)
   -------------------------------------------------------------------------- */
.textcrm-pf--reveal .textcrm-pf__animate {
	opacity: 0;
	transform: translateY(24px);
	animation: textcrm-pf-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.textcrm-pf--reveal .textcrm-pf__animate:nth-child(1) { animation-delay: 0.05s; }
.textcrm-pf--reveal .textcrm-pf__grid .textcrm-pf__animate:nth-child(1) { animation-delay: 0.15s; }
.textcrm-pf--reveal .textcrm-pf__grid .textcrm-pf__animate:nth-child(2) { animation-delay: 0.25s; }
.textcrm-pf--reveal .textcrm-pf__grid .textcrm-pf__animate:nth-child(3) { animation-delay: 0.35s; }
.textcrm-pf--reveal .textcrm-pf__grid .textcrm-pf__animate:nth-child(4) { animation-delay: 0.45s; }
.textcrm-pf--reveal .textcrm-pf__stats { animation-delay: 0.55s; }

@keyframes textcrm-pf-fade-up {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* md — analytics + chatbots become 6/6, stats become 4-up */
@media (min-width: 768px) {
	.textcrm-pf__card--analytics,
	.textcrm-pf__card--chatbots {
		grid-column: span 6;
	}

	.textcrm-pf__title {
		font-size: 48px;          /* md:text-5xl, matching other section widgets */
	}

	.textcrm-pf__stats-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.textcrm-pf__card--workflows .textcrm-pf__card-body {
		flex-direction: row;
	}

	.textcrm-pf__card--workflows .textcrm-pf__card-text,
	.textcrm-pf__card--workflows .textcrm-pf__diagram {
		flex: 1 1 50%;
	}
}

/* lg — workflows 8/4 inbox; stats 4-up */
@media (min-width: 1024px) {
	.textcrm-pf__card--workflows { grid-column: span 8; }
	.textcrm-pf__card--inbox     { grid-column: span 4; }

	.textcrm-pf__stats-inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Small phones */
@media (max-width: 480px) {
	.textcrm-pf {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.textcrm-pf__inner {
		padding-left: 16px;
		padding-right: 16px;
	}
	.textcrm-pf__card {
		padding: 24px;
	}
	.textcrm-pf__title {
		font-size: 30px;          /* matches other widgets at small phone */
	}
	.textcrm-pf__stat-value {
		font-size: 36px;
	}
	.textcrm-pf__stats {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.textcrm-pf__stat:not(:last-child) {
		border-right-color: transparent;
	}
	.textcrm-pf__bot {
		width: 96px;
		height: 96px;
		top: 16px;
		right: 16px;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.textcrm-pf *,
	.textcrm-pf *::before,
	.textcrm-pf *::after {
		animation: none !important;
		transition: none !important;
	}
	.textcrm-pf--reveal .textcrm-pf__animate {
		opacity: 1;
		transform: none;
	}
}