/* =========================================================================
   Twinco Expert Hub — port of components/sections/ExpertHub.tsx
   ========================================================================= */
.elementor-widget-twinco_expert_hub .elementor-widget-container { padding: 0; }

.twinco-eh { width: 100%; background-color: var(--twinco-ink); font-family: var(--twinco-font-sans); }
.twinco-eh__frame { position: relative; margin-inline: auto; width: 100%; max-width: 1440px; padding: 100px 80px; }
.twinco-eh__content { position: relative; display: flex; width: 100%; flex-direction: column; gap: 60px; }

/* ---- Header ---- */
.twinco-eh__head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 40px; }
.twinco-eh__head-left { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 16px; }
.twinco-eh .twinco-eh__head-icon { width: 40px; height: 40px; flex-shrink: 0; display: block; }
.twinco-eh__head-titles { display: flex; flex-direction: column; gap: 4px; line-height: 1; word-break: break-word; }
.twinco-eh__title-gold { font-size: 36px; font-weight: 700; line-height: 1; color: var(--twinco-gold); }
.twinco-eh__title-white { font-size: 32px; font-weight: 400; line-height: 1; color: #fff; }
.twinco-eh__intro { width: 671px; max-width: 100%; font-size: 16px; font-weight: 400; line-height: 1.3; color: #fff; word-break: break-word; }

/* ---- Process row ---- */
.twinco-eh__row { position: relative; display: flex; width: 100%; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 24px; }

.twinco-eh__card {
	display: flex;
	height: 400px;
	width: 180px;
	flex-shrink: 0;
	align-items: center;
	overflow: clip;
	border-radius: 32px;
	border: 2px solid var(--twinco-sand);
	padding: 16px;
	box-shadow: 0 2px 15px 0 rgba(184, 250, 255, 0.8);
	background-image:
		linear-gradient(-48.44255621deg, rgba(20, 123, 254, 0.2) 2.4415%, rgba(0, 0, 0, 0.2) 73.352%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	will-change: transform;
}
.twinco-eh__card:hover { transform: translateY(-6px) scale(1.03); border-color: #fff; box-shadow: 0 10px 30px 0 rgba(184, 250, 255, 0.95); }
.twinco-eh__card-in { display: flex; height: 100%; width: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }
.twinco-eh__card-num { width: 100%; text-align: center; font-size: 50px; font-weight: 500; line-height: 1; color: #fff; }
.twinco-eh__card-text { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 16px; color: #fff; word-break: break-word; }
.twinco-eh__card-title { width: 100%; text-align: center; font-size: 26px; font-weight: 700; line-height: 1.2; }
.twinco-eh__cline { display: block; }
.twinco-eh__card-desc { width: 100%; font-size: 14px; font-weight: 400; line-height: 1.3; }
.twinco-eh .twinco-eh__card-icon { width: 50px; height: 50px; flex-shrink: 0; display: block; transition: transform 0.3s ease; }
.twinco-eh__card:hover .twinco-eh__card-icon { transform: scale(1.1); }

/* ---- Hub card (#4) ---- */
.twinco-eh__hub {
	height: 488px;
	width: 260px;
	background-image:
		linear-gradient(-43.6135316deg, rgba(20, 123, 254, 0.2) 2.4415%, rgba(0, 0, 0, 0.2) 73.352%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
}
.twinco-eh__hub .twinco-eh__card-in { height: auto; }
.twinco-eh__network { display: flex; width: 228px; flex-direction: column; align-items: center; gap: 12px; }
.twinco-eh__team { display: flex; width: 87px; flex-direction: column; align-items: center; gap: 4px; }
.twinco-eh__team-circle { display: flex; width: 70px; height: 70px; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); transition: transform 0.3s ease; }
.twinco-eh__hub:hover .twinco-eh__team-circle { transform: scale(1.1); }
.twinco-eh .twinco-eh__team-circle img { width: 50px; height: 50px; flex-shrink: 0; display: block; }
.twinco-eh__team-label { width: 100%; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--twinco-gold); }
.twinco-eh__experts { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; }
.twinco-eh__erow { display: flex; width: 100%; align-items: center; }
.twinco-eh__erow--between { justify-content: space-between; }
.twinco-eh__erow--center { justify-content: center; gap: 28px; }
.twinco-eh__expert { display: flex; flex-shrink: 0; flex-direction: column; align-items: center; gap: 4px; }
.twinco-eh__expert-label { text-align: center; font-size: 12px; font-weight: 400; line-height: 1.3; color: #fff; word-break: break-word; }
.twinco-eh .twinco-eh__dot { width: 6px; height: 6px; flex-shrink: 0; display: block; }

/* ---- Stats ---- */
.twinco-eh__stats { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; }
.twinco-eh__stat { display: flex; width: 190px; flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 16px; word-break: break-word; }
.twinco-eh__stat-title { width: 100%; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--twinco-gold); }
.twinco-eh__stat-desc { width: 100%; font-size: 14px; font-weight: 400; line-height: 1.3; color: #fff; }
.twinco-eh__stat-divider { display: flex; height: 69px; width: 0; flex-shrink: 0; align-items: center; justify-content: center; }
.twinco-eh .twinco-eh__stat-divider img { height: 1px; width: 69px; max-width: none; transform: rotate(-90deg); opacity: 0.6; display: block; }

/* ---- Decorative glow ---- */
.twinco-eh__glow { pointer-events: none; position: absolute; left: 322px; top: -129px; display: none; height: 361.212px; width: 691.788px; align-items: center; justify-content: center; mix-blend-mode: exclusion; }
.twinco-eh__glow-rot { flex: none; transform: rotate(4.77deg); }
.twinco-eh__glow-box { position: relative; height: 306.624px; width: 668.585px; }
.twinco-eh__glow-in { position: absolute; inset: -76.97% -35.3%; }
.twinco-eh .twinco-eh__glow-in img { display: block; width: 100%; height: 100%; max-width: none; }

/* ---- Responsive ---- */
@media (min-width: 1440px) {
	.twinco-eh__row { flex-wrap: nowrap; justify-content: space-between; }
	.twinco-eh__glow { display: flex; }
}
@media (max-width: 1023.98px) {
	.twinco-eh__head { flex-direction: column; align-items: flex-start; }
	.twinco-eh__stats { flex-wrap: wrap; justify-content: center; row-gap: 32px; }
	.twinco-eh__stat-divider { display: none; }
}
@media (max-width: 767.98px) {
	.twinco-eh__frame { padding: 48px 24px; }
}
@media (max-width: 639.98px) {
	.twinco-eh__frame { padding-left: 16px; padding-right: 16px; }
}