:root {
	--primary-color: #ff5533;
	--primary-dark: #e6442a;
	--secondary-color: #111827;
	--accent-color: #034c91;
	--text-primary: #111827;
	--text-secondary: #4b5563;
	--text-light: #6b7280;
	--background-color: #ffffff;
	--background-light: #f7f8fa;
	--card-background: #ffffff;
	--border-color: #e5e7eb;
	--white: #ffffff;
	--black: #000000;
	--shadow-color: rgba(0, 0, 0, 0.08);
	--font-family: 'Poppins', sans-serif;
}

body {
	font-family: var(--font-family);
	color: var(--text-secondary);
	background-color: var(--background-color);
	line-height: 1.6;
}

h1,h2,h3,h4,h5,h6 {
	color: var(--text-primary);
	font-weight: 700;
}

.text-primary-color {
	color: var(--primary-color);
}

.bg-primary-color {
	background-color: var(--primary-color);
}

.hover\:bg-primary-dark:hover {
	background-color: var(--primary-dark);
}

.bg-secondary-color {
	background-color: var(--secondary-color);
}

.bg-accent-color {
	background-color: var(--accent-color);
}

.bg-background-light {
	background-color: var(--background-light);
}

.border-color {
	border-color: var(--border-color);
}

.border-secondary {
	border-color: var(--secondary-color);
}

.border-primary {
	border-color: var(--primary-color);
}

.text-primary {
	color: var(--primary-color);
}

.bg-primary {
	background-color: var(--primary-color);
}

.bg-gray {
	background-color: #e5e5e5;
}

.web-cta {
	background-color: #f7d3cb!important;
}

.toc-link.active {
	color: var(--primary-color);
	border-left-color: var(--primary-color);
	font-weight: 600;
}

.card-shadow {
	box-shadow: 0 4px 6px -1px var(--shadow-color),0 2px 4px -2px var(--shadow-color);
	transition: transform 0.2s ease-in-out,box-shadow 0.2s ease-in-out;
}

.card-shadow:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 15px -3px var(--shadow-color),0 4px 6px -4px var(--shadow-color);
}

details>summary {
	list-style: none;
}

details>summary::-webkit-details-marker {
	display: none;
}

details[open] summary .accordion-arrow {
	transform: rotate(90deg);
}

.container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1.5rem;
}

h1,h2,h3,h4 {
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.3;
}

h1 {
	font-size: 2.5rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

.section-title {
	text-align: center;
	margin-bottom: 3rem;
	position: relative;
	display: block;
	font-size: 2.75rem;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.3;
}

.section-title::after {
	content: '';
	position: absolute;
	bottom: -1rem;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 4px;
	background-color: var(--primary-color);
	border-radius: 2px;
}

.section-subtitle {
	text-align: center;
	max-width: 1200px;
	margin: 0 auto 3rem auto;
	font-size: 1.1rem;
	color: var(--text-light);
}

.section-padding {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.grid-layout {
	display: grid;
	gap: 2rem;
}

.sv-card {
	background-color: var(--card-background);
	border-radius: 12px;
	transition: transform 0.3s ease,box-shadow 0.3s ease;
	height: 100%;
}

.sv-card__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.sv-card__icon {
	font-size: 2rem;
	color: var(--primary-color);
}

.sv-card__title {
	margin: 0;
}

.sv-card__description {
	color: var(--text-light);
}

.sv-card_btn {
	display: block;
	width: 100%;
	padding: 12px 24px;
	border-radius: 8px;
	background: var(--primary-color,#ff5533);
	color: #fff;
	text-align: center;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s ease-in-out,box-shadow 0.2s ease-in-out;
	box-shadow: 0 4px 6px rgb(0 0 0 / .1);
	margin-top: 20px;
}

.sv-card_btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 7px 14px rgb(255 85 51 / .3);
	background: var(--primary-dark-color,#e64d2e);
}

.page-banner {
	background-color: var(--secondary-color);
	color: var(--white);
}

.page-banner h1 {
	color: var(--white);
}

.page-banner p {
	color: rgb(255 255 255 / .8);
}

.virtualization-explanation .icon-box {
	width: 80px;
	height: 80px;
	background: var(--primary-color);
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: #fff;
	margin-bottom: 1rem;
}

.virtualization-explanation .benefit-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.virtualization-explanation .benefit-item i {
	color: var(--primary-color);
	font-size: 1.25rem;
}

.virtualization-diagram {
	position: relative;
}

.physical-server {
	background: var(--card-background);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 8px 40px var(--shadow-color);
}

.server-header {
	text-align: center;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}

.server-header h4 {
	color: var(--text-primary);
	margin-bottom: .5rem;
	font-size: 1.25rem;
}

.server-specs {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.server-specs span {
	background: var(--background-light);
	color: var(--text-secondary);
	padding: .25rem .75rem;
	border-radius: 20px;
	font-size: .75rem;
	border: 1px solid var(--border-color);
}

.virtual-machines-grid {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 1rem;
}

.vm-card {
	background: var(--white);
	border: 1px solid var(--primary-color);
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.vm-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgb(255 85 51 / .15);
}

.vm-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin-bottom: .5rem;
}

.vm-header i {
	font-size: 2.25rem;
	color: var(--primary-color);
}

.vm-specs {
	color: var(--text-secondary);
}

.how-it-works .sv-card {
	padding: 2rem;
	text-align: center;
	border: 2px solid var(--primary-color);
	box-shadow: 0 4px 15px var(--shadow-color);
}

.how-it-works .sv-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 60px rgb(0 0 0 / .15);
}

.how-it-works .sv-card__icon-wrapper {
	width: 80px;
	height: 80px;
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color);
}

.how-it-works .sv-card__icon {
	font-size: 2.5rem;
	color: var(--white);
}

.how-to-section {
	background-color: var(--secondary-color);
	color: var(--white);
}

.how-to-section .section-title {
	color: var(--white);
}

.step-card {
	background-color: var(--white);
	color: var(--text-primary);
	padding: 2.5rem;
	position: relative;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgb(0 0 0 / .1);
	height: 100%;
	transition: transform 0.3s ease,box-shadow 0.3s ease;
}

.step-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 10px 25px rgb(0 0 0 / .15);
}

.step-number {
	position: absolute;
	top: -20px;
	left: 20px;
	background: var(--primary-color);
	color: var(--white);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 1.2rem;
	border: 3px solid var(--secondary-color);
}

.step-title {
	color: var(--primary-color);
	font-size: 20px;
	margin-bottom: 10px;
	font-weight: 500;
}

.hypervisor-tools .sv-card {
	padding: 2.5rem;
	border: 1px solid var(--border-color);
	box-shadow: 0 4px 15px var(--shadow-color);
	border-top: 5px solid #fff0;
}

.hypervisor-tools .sv-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 10px 25px rgb(0 0 0 / .1);
	border-top-color: var(--primary-color);
}

.tools-list {
	text-align: left;
	max-width: 900px;
	margin: 3rem auto 0 auto;
}

.tool-list-item {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--border-color);
}

.tool-list-item:first-child {
	border-top: 1px solid var(--border-color);
}

.tool-list-item h4 {
	color: var(--primary-color);
	margin-bottom: .5rem;
	font-weight: 600;
}

.tool-list-item h3 {
	color: var(--primary-color);
	margin-bottom: .5rem;
	font-weight: 600;
}

.comparison-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 3rem;
	box-shadow: 0 4px 25px var(--shadow-color);
	border-radius: 12px;
	overflow: hidden;
}

.comparison-table th,.comparison-table td {
	padding: 1.25rem 1.5rem;
	text-align: left;
	border-bottom: 1px solid var(--border-color);
}

.comparison-table thead {
	background-color: var(--background-light);
}

.comparison-table th {
	font-weight: 600;
	color: var(--text-primary);
}

.comparison-table tbody tr:last-child td {
	border-bottom: none;
}

.comparison-table tbody tr:nth-child(even) {
	background-color: var(--background-light);
}

.con-tool-card {
	padding: 2rem;
	background-color: #2c2c2c;
	border-left: 4px solid var(--primary-color);
	color: var(--white);
}

.con-tool-card:hover {
	transform: translateY(-10px) rotateX(5deg);
	box-shadow: 0 25px 50px -12px rgb(255 85 51 / .25);
}

.con-tool-card .sv-card__title {
	color: var(--white);
}

.con-tool-card .sv-card__description {
	color: #d1d5db;
}

.tabs__nav {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.tabs__button {
	width: 100%;
	text-align: left;
	padding: 1rem;
	border-radius: 8px;
	border: none;
	background-color: #fff0;
	border-left: 4px solid var(--border-color);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.3s ease;
}

.tabs__button:hover {
	background-color: #e6442a1a;
	color: var(--text-primary);
}

.tabs__button.active {
	background-color: #ff55331a;
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.tabs__content .sv-card {
	padding: 2rem;
	background-color: var(--background-light);
	border: 1px solid var(--border-color);
}

.tabs__panel {
	display: none;
	animation: fade-in 0.6s ease;
}

.tabs__panel.active {
	display: block;
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(15px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width:992px) {
	.grid-cols-3 {
		grid-template-columns: repeat(2,1fr);
	}
}

@media (max-width:768px) {
	h1 {
		font-size: 2rem;
	}

	.section-title {
		font-size: 2rem;
	}

	h3 {
		font-size: 1.3rem;
	}

	.section-padding {
		padding: 3rem 0;
	}

	.container {
		padding: 0 1rem;
	}

	.grid-cols-2, .grid-cols-3 {
		grid-template-columns: 1fr;
	}

	.page-banner {
		text-align: center;
	}

	.tabs-wrapper {
		flex-direction: column;
	}

	.tabs__nav {
		flex-direction: row;
		overflow-x: auto;
		margin-bottom: 2rem;
	}

	.tabs__button {
		white-space: nowrap;
	}

	.comparison-table thead {
		display: none;
	}

	.comparison-table,.comparison-table tbody,.comparison-table tr,.comparison-table td {
		display: block;
		width: 100%;
	}

	.comparison-table tr {
		margin-bottom: 1.5rem;
		border: 1px solid var(--border-color);
		border-radius: 8px;
	}

	.comparison-table td {
		text-align: right;
		position: relative;
		padding-left: 50%;
		border-bottom: 1px solid var(--border-color);
	}

	.comparison-table td:last-child {
		border-bottom: none;
	}

	.comparison-table td::before {
		content: attr(data-label);
		position: absolute;
		left: 1rem;
		width: calc(50% - 2rem);
		text-align: left;
		font-weight: 600;
		color: var(--text-primary);
	}
}

.card-shadow {
	box-shadow: 0 4px 6px -1px var(--shadow-color),0 2px 4px -2px var(--shadow-color);
}

.esxi-section {
	padding: 48px 0;
}

.esxi-uc-container {
	max-width: 2000px;
	margin: 0 auto;
	padding: 0 24px;
}

.esxi-container {
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 24px;
}

.esxi-section-title {
	font-size: 2.25rem;
	font-weight: 800;
	text-align: center;
	margin-bottom: 40px;
}

.esxi-use-cases-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
	gap: 32px;
}

.esxi-use-case-card {
	background: var(--background-light);
	border-radius: 12px;
	padding: 32px;
	text-align: center;
	border: 1px solid var(--border-color);
	transition: transform 0.3s ease,box-shadow 0.3s ease;
}

.esxi-use-case-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 20px -4px var(--shadow-color);
}

.esxi-use-case-icon-wrapper {
	margin: 0 auto 20px auto;
	height: 64px;
	width: 64px;
	border-radius: 50%;
	background-color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
}

.esxi-use-case-icon-wrapper svg {
	height: 32px;
	width: 32px;
}

.esxi-use-case-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 8px;
}

.esxi-use-case-text {
	color: var(--text-light);
	line-height: 1.6;
}

.esxi-components-wrapper {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.esxi-cta-free-install-icon {
	flex-shrink: 0;
	background-color: var(--primary-color);
	color: var(--white);
	height: 56px;
	width: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.esxi-cta-free-install-icon svg {
	width: 28px;
	height: 28px;
}

.esxi-cta-section {
	background-color: var(--secondary-color);
	color: var(--white);
	border-radius: 16px;
	padding: 56px 24px;
	text-align: center;
}

.esxi-cta-title {
	color: var(--white);
	font-size: 2.25rem;
	font-weight: 800;
	margin-bottom: 16px;
}

.esxi-cta-subtitle {
	max-width: 650px;
	margin: 0 auto 32px auto;
	color: #d1d5db;
	font-size: 1.125rem;
	line-height: 1.6;
}

.esxi-cta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
	gap: 20px;
	max-width: 1000px;
	margin: 0 auto 40px auto;
	text-align: left;
}

.esxi-cta-item {
	background-color: #1f2937;
	padding: 20px;
	border-radius: 8px;
}

.esxi-cta-item-title {
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--white);
}

.esxi-cta-item-text {
	color: #9ca3af;
	font-size: .9rem;
}

.esxi-cta-button {
	display: inline-block;
	background-color: var(--primary-color);
	color: var(--white);
	font-weight: 700;
	padding: 14px 32px;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color 0.3s ease;
	font-size: 1.125rem;
}

.esxi-cta-button:hover {
	background-color: var(--primary-dark);
}

.esxi-cta-free-install-icon {
	flex-shrink: 0;
	background-color: var(--primary-color);
	color: var(--white);
	height: 56px;
	width: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.esxi-cta-free-install-icon svg {
	width: 28px;
	height: 28px;
}

.esxi-install-section {
	background-color: var(--background-light);
}

@media (min-width:768px) {
	.esxi-components-wrapper {
		flex-direction: row;
		gap: 32px;
	}
}

.esxi-component-card {
	flex: 1;
	background: var(--card-background);
	padding: 24px;
	border-radius: 12px;
	box-shadow: 0 4px 12px var(--shadow-color);
	border-top: 4px solid var(--accent-color);
}

.esxi-component-card-number {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--accent-color);
	margin-bottom: 8px;
}

.esxi-component-title {
	font-size: 1.5rem;
	margin-bottom: 4px;
	font-weight: 700;
}

.esxi-component-subtitle {
	color: var(--primary-color);
	font-weight: 600;
	margin-bottom: 12px;
}

.esxi-component-text {
	color: var(--text-secondary);
}

.esxi-host-client-section {
	background-color: var(--background-light);
	padding: 56px 0;
	border-radius: 16px;
	margin-top: 48px;
}

.esxi-host-client-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: flex-start;
}

@media (min-width:992px) {
	.esxi-host-client-grid {
		grid-template-columns: 1fr 1.2fr;
	}
}

.esxi-host-client-title {
	font-size: 2rem;
	margin-bottom: 16px;
	font-weight: 700;
}

.esxi-host-client-text {
	line-height: 1.7;
	margin-bottom: 24px;
}

.esxi-tasks-title {
	font-size: 1.75rem;
	margin-bottom: 16px;
	font-weight: 700;
}

.esxi-detailed-task-group-title {
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--text-primary);
	margin-bottom: 8px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--border-color);
}

.esxi-detailed-task-list {
	list-style: none;
	padding: 0;
	margin-top: 12px;
}

.esxi-detailed-task-list li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 8px;
	color: var(--text-secondary);
}

.esxi-detailed-task-list li::before {
	content: '✓';
	color: var(--primary-color);
	font-weight: 700;
	margin-right: 12px;
	flex-shrink: 0;
	margin-top: 3px;
}

.esxi-enterprise-card {
	background: var(--card-background);
	border-radius: 12px;
	border-left: 5px solid var(--primary-color);
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 4px 10px -2px var(--shadow-color);
	transition: box-shadow 0.3s ease;
}

.esxi-enterprise-card:hover {
	box-shadow: 0 8px 16px -2px var(--shadow-color);
}

.esxi-enterprise-title {
	font-size: 1.75rem;
	margin-bottom: 8px;
	font-weight: 700;
}

.esxi-enterprise-text {
	line-height: 1.6;
}

.esxi-enterprise-text strong {
	color: var(--primary-dark);
	font-weight: 600;
}

.esxi-cta-section {
	background-color: var(--secondary-color);
	color: var(--white);
	border-radius: 16px;
	padding: 56px 24px;
	text-align: center;
}

.esxi-cta-title {
	color: var(--white);
	font-size: 2.25rem;
	font-weight: 800;
	margin-bottom: 16px;
}

.esxi-cta-subtitle {
	max-width: 650px;
	margin: 0 auto 32px auto;
	color: #d1d5db;
	font-size: 1.125rem;
	line-height: 1.6;
}

.esxi-cta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(225px,1fr));
	gap: 20px;
	max-width: 100%;
	margin: 0 auto 40px auto;
	text-align: left;
}

.esxi-cta-item {
	background-color: #1f2937;
	padding: 20px;
	border-radius: 8px;
}

.esxi-cta-item-title {
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--white);
}

.esxi-cta-item-text {
	color: #9ca3af;
	font-size: .9rem;
}

.esxi-cta-subtitle2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 16px;
}

.esxi-cta-text2 {
	max-width: 650px;
	margin: 0 auto 32px auto;
	color: #d1d5db;
}

.esxi-cta-button {
	display: inline-block;
	background-color: var(--primary-color);
	color: var(--white);
	font-weight: 700;
	padding: 14px 32px;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color 0.3s ease;
	font-size: 1.125rem;
}

.esxi-cta-button:hover {
	background-color: var(--primary-dark);
}

.esxi-cta-free-install-box {
	background-color: #1f2937;
	border: 1px solid #374151;
	border-radius: 12px;
	padding: 24px;
	max-width: 700px;
	margin: 40px auto 32px auto;
	display: flex;
	align-items: center;
	gap: 24px;
	text-align: left;
}

.esxi-cta-free-install-icon {
	flex-shrink: 0;
	background-color: var(--primary-color);
	color: var(--white);
	height: 56px;
	width: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.esxi-cta-free-install-icon svg {
	width: 28px;
	height: 28px;
}

.esxi-cta-section .esxi-cta-subtitle2 {
	margin-bottom: 8px;
}

.esxi-cta-section .esxi-cta-text2 {
	margin: 0;
	color: #9ca3af;
	max-width: 100%;
}

.faq-card {
	background-color: var(--white);
	padding: 1rem;
	border-radius: .5rem;
	box-shadow: 0 4px 6px -1px var(--shadow-color),0 2px 4px -2px var(--shadow-color);
}

details>summary {
	list-style: none;
}

details>summary::-webkit-details-marker {
	display: none;
}

details[open] summary .accordion-arrow {
	transform: rotate(90deg);
}

.esxi-install-box {
	display: flex;
	align-items: center;
	gap: 2rem;
	background-color: #1F2937;
	padding: 2.5rem;
	border-radius: 12px;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -2px rgb(0 0 0 / .05);
}

.esxi-install-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #F9FAFB;
	margin: 0 0 .5rem 0;
}

.esxi-install-text {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

.hyper-section {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.hyper-container,.hyper-uc-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.hyper-section-title {
	font-size: 2.25rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 2rem;
	color: var(--heading-color);
}

.card-shadow {
	box-shadow: var(--card-shadow);
}

.hyper-use-cases-grid {
	display: grid;
	grid-template-columns: repeat(1,1fr);
	gap: 1.5rem;
}

@media (min-width:768px) {
	.hyper-use-cases-grid {
		grid-template-columns: repeat(2,1fr);
	}
}

@media (min-width:1024px) {
	.hyper-use-cases-grid {
		grid-template-columns: repeat(4,1fr);
	}
}

.hyper-use-case-card {
	background-color: #fff;
	padding: 2rem;
	border-radius: .5rem;
	text-align: center;
	box-shadow: var(--card-shadow);
	transition: transform 0.2s,box-shadow 0.2s;
}

.hyper-use-case-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -2px rgb(0 0 0 / .05);
}

.hyper-use-case-icon-wrapper {
	margin: 0 auto 1rem;
	background-color: var(--primary-color);
	color: #fff;
	height: 4rem;
	width: 4rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hyper-use-case-icon-wrapper svg {
	height: 2rem;
	width: 2rem;
}

.hyper-use-case-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: .5rem;
	color: var(--heading-color);
}

.hyper-use-case-text {
	color: #64748b;
}

.hyper-enterprise-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width:768px) {
	.hyper-enterprise-wrapper {
		grid-template-columns: repeat(2,1fr);
	}
}

.hyper-enterprise-card {
	background-color: #ebe9e9;
	padding: 1.5rem;
	border-radius: .5rem;
	border-left: 4px solid var(--primary-color);
	box-shadow: var(--card-shadow);
}

.hyper-enterprise-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: .5rem;
}

.hyper-enterprise-text {
	line-height: 1.6;
}

.hyper-cta-section {
	background-color: var(--heading-color);
	color: #fff;
	padding: 3rem 1.5rem;
	border-radius: .5rem;
	text-align: center;
}

.hyper-cta-title {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

.hyper-cta-subtitle {
	font-size: 1.125rem;
	max-width: 800px;
	margin: 0 auto 2rem auto;
	color: #d1d5db;
}

.hyper-cta-grid {
	display: grid;
	grid-template-columns: repeat(1,1fr);
	gap: 1.5rem;
	max-width: 1000px;
	margin: auto;
}

@media (min-width:640px) {
	.hyper-cta-grid {
		grid-template-columns: repeat(2,1fr);
	}
}

@media (min-width:1024px) {
	.hyper-cta-grid {
		grid-template-columns: repeat(4,1fr);
	}
}

.hyper-cta-item {
	background-color: rgb(255 255 255 / .05);
	padding: 1.5rem;
	border-radius: .5rem;
}

.hyper-cta-item-title {
	font-weight: 600;
	font-size: 1.125rem;
	margin-bottom: .5rem;
	color: #fff;
}

.hyper-cta-item-text {
	color: #9ca3af;
}

.hyper-install-section {
	background-color: var(--secondary-color);
}

.hyper-install-box {
	background-color: #fff;
	border-radius: .5rem;
	padding: 2rem;
	max-width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: var(--card-shadow);
}

@media (min-width:768px) {
	.hyper-install-box {
		flex-direction: row;
		text-align: left;
	}
}

.hyper-cta-free-install-icon {
	flex-shrink: 0;
	background-color: var(--primary-color);
	color: #fff;
	height: 4rem;
	width: 4rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}

@media (min-width:768px) {
	.hyper-cta-free-install-icon {
		margin-right: 1.5rem;
		margin-bottom: 0;
	}
}

.hyper-install-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: .5rem;
}

.hyper-install-text {
	margin-bottom: 1rem;
}

.hyper-cta-button {
	display: inline-block;
	background-color: var(--primary-color);
	color: #fff;
	padding: .75rem 1.5rem;
	border-radius: .375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s;
}

.hyper-cta-button:hover {
	background-color: #005a9e;
}

.hyperv-section {
	background: var(--background-light);
	padding: 60px 20px;
	font-family: var(--font-family);
}

.hyperv-container {
	margin: 0 auto;
}

.hyperv-header {
	text-align: center;
	margin-bottom: 40px;
}

.hyperv-header h2 {
	color: var(--primary-color);
	font-size: 2rem;
	font-weight: 700;
}

.hyperv-header p {
	color: var(--text-secondary);
	max-width: 700px;
	margin: 10px auto 0;
	font-size: 1rem;
}

.hyperv-list {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
	gap: 30px;
}

.hyperv-item {
	border-left: 4px solid var(--primary-color);
	padding: 20px;
	background: var(--white);
	box-shadow: 0 4px 8px var(--shadow-color);
	transition: transform 0.3s ease,box-shadow 0.3s ease;
}

.hyperv-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px var(--shadow-color);
}

.hyperv-item h3 {
	color: var(--accent-color);
	font-size: 1.25rem;
	margin-bottom: 10px;
	font-weight: 600;
}

.hyperv-item p {
	color: var(--text-light);
	font-size: .95rem;
	line-height: 1.6;
}

.version-color {
	background-color: #f3e7e4;
	border-color: #f53;
	--tw-border-opacity: 1;
	border-radius: 10px;
}

.comparison-section {
	background-color: #fff;
	padding: 3rem;
	border-radius: 20px;
	box-shadow: 0 15px 30px rgb(0 0 0 / .1);
	width: 100%;
}

.section-title {
	text-align: center;
	font-size: 2.5rem;
	color: #000;
	margin-bottom: 2.5rem;
	font-weight: 700;
}

.comparison-container {
	display: flex;
	gap: 2rem;
	width: 100%;
	flex-wrap: wrap;
}

.tool-box {
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 10px 25px rgb(0 0 0 / .08);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 300px;
	transition: transform 0.3s ease,box-shadow 0.3s ease;
	border: 1px solid #eee;
}

.tool-box:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgb(0 0 0 / .12);
}

.tool-header {
	padding: 2rem;
	color: #fff;
	text-align: center;
	background: linear-gradient(135deg,#ff5533,#d63c1a);
}

.tool-header h2 {
	margin: 0;
	font-size: 1.8rem;
	font-weight: 700;
}

.tool-header p {
	margin: .5rem 0 0;
	font-size: 1rem;
	opacity: .9;
}

.tool-content {
	padding: 2rem;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.tool-content p {
	font-size: 1rem;
	line-height: 1.6;
	color: #000;
	margin-bottom: 1.5rem;
}

.best-for {
	margin-top: auto;
	padding-top: 1.5rem;
	border-top: 1px solid #e0e0e0;
}

.best-for h3 {
	font-size: 1.1rem;
	color: #000;
	margin-bottom: 1rem;
}

.best-for ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.best-for li {
	padding: .5rem 0 .5rem 2rem;
	position: relative;
	color: #000;
}

.best-for li::before {
	content: '✔';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
	font-size: 1.2rem;
	color: #f53;
}

@media (max-width:992px) {
	.comparison-section {
		padding: 2rem;
	}
}

@media (max-width:768px) {
	body {
		padding: 1rem;
	}

	.comparison-section {
		padding: 1.5rem;
	}

	.section-title {
		font-size: 2rem;
		margin-bottom: 2rem;
	}

	.comparison-container {
		flex-direction: column;
		gap: 1.5rem;
	}
}

.cta-section {
	background: linear-gradient(8deg,#72473e,#000000);
	color: #fff;
	padding: 60px 20px;
	text-align: center;
	width: 100%;
}

.esxi-install-title {
	font-size: 2.5rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 20px;
	line-height: 1.3;
}

.esxi-install-text {
	font-size: 1.2rem;
	color: #e5e7eb;
	margin-bottom: 30px;
	line-height: 1.6;
	margin-left: auto;
	margin-right: auto;
}

.esxi-install-button-wrapper {
	margin-top: 20px;
}

.esxi-cta-button {
	display: inline-block;
	background-color: #fff;
	color: #000;
	padding: 15px 35px;
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgb(0 0 0 / .15);
	transition: background-color 0.3s ease,box-shadow 0.3s ease;
}

.esxi-cta-button:hover {
	background-color: #f3f4f6;
	box-shadow: 0 6px 16px rgb(0 0 0 / .2);
}

@media (max-width:768px) {
	.esxi-install-title {
		font-size: 2rem;
	}

	.esxi-install-text {
		font-size: 1.1rem;
		max-width: 90%;
	}

	.esxi-cta-button {
		padding: 12px 30px;
		font-size: 1rem;
	}
}

@media (max-width:480px) {
	.cta-section {
		padding: 40px 15px;
	}

	.esxi-install-title {
		font-size: 1.6rem;
	}

	.esxi-install-text {
		font-size: .95rem;
	}

	.esxi-cta-button {
		padding: 10px 25px;
		font-size: .9rem;
	}
}

.web-section-title::after {
	content: '';
	display: block;
	width: 60px;
	height: 4px;
	background: var(--primary-color);
	margin-top: 8px;
	border-radius: 9999px;
}

.web-cta-button {
	transition: all 0.3s ease;
}

.web-cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgb(255 85 51 / .4);
}

.web-trifecta-card {
	box-shadow: 0 4px 15px var(--shadow-color),0 10px 30px rgb(255 85 51 / .2);
	transition: all 0.3s ease;
}

.web-trifecta-card:hover {
	transform: translateY(-5px) scale(1.01);
	box-shadow: 0 10px 20px rgb(0 0 0 / .15),0 15px 40px rgb(255 85 51 / .4);
}

.web-feature-card {
	transition: all 0.3s ease;
	border: 1px solid var(--border-color);
	box-shadow: 6px 6px 0 0 var(--secondary-color);
}

.web-feature-card:hover {
	transform: translateY(-3px);
	box-shadow: 8px 8px 0 0 var(--primary-color);
}

.web-icon-glow-primary {
	filter: drop-shadow(0 0 4px rgb(255 85 51 / .6));
}

.web-icon-glow-secondary {
	filter: drop-shadow(0 0 4px rgb(17 24 39 / .4));
}

.web-use-case-card {
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 15px 30px var(--shadow-color);
	transition: transform 0.3s ease;
}

.web-use-case-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgb(255 85 51 / .2);
}

.web-config-card {
	box-shadow: 0 10px 20px rgb(0 0 0 / .1);
	transition: transform 0.3s ease,box-shadow 0.3s ease;
}

.web-config-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 15px 30px rgb(0 0 0 / .15);
}

.mail-server-section {
	padding: 80px 0;
	max-width: 1400px;
	margin: 0 auto;
}

.section-container {
	padding: 0 40px;
}

.category-wrapper {
	margin-bottom: 80px;
}

.category-wrapper:last-child {
	margin-bottom: 0;
}

.category-header {
	display: flex;
	align-items: center;
	margin-bottom: 40px;
	padding-bottom: 20px;
	border-bottom: 3px solid #f53;
}

.category-icon {
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg,#ff5533 0%,#ff7755 100%);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	box-shadow: 0 4px 15px rgb(255 85 51 / .3);
}

.category-icon i {
	font-size: 28px;
	color: #fff;
}

.category-title {
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #000;
}

.software-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
	gap: 30px;
}

.software-item {
	background: #fff;
	border-radius: 16px;
	padding: 35px;
	box-shadow: 0 4px 20px rgb(0 0 0 / .08);
	transition: all 0.3s ease;
	border: 2px solid #fff0;
	position: relative;
	overflow: hidden;
}

.software-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: linear-gradient(90deg,#ff5533 0%,#f7d3cb 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.software-item:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 35px rgb(255 85 51 / .2);
	border-color: #f7d3cb;
}

.software-item:hover::before {
	transform: scaleX(1);
}

.software-name {
	font-size: 24px;
	font-weight: 700;
	color: #000;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
}

.software-name::after {
	content: '';
	width: 6px;
	height: 6px;
	background: #f53;
	border-radius: 50%;
	margin-left: 12px;
}

.software-description {
	font-size: 15px;
	color: #555;
	line-height: 1.8;
}

.mta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(450px,1fr));
	gap: 30px;
}

@media (max-width:768px) {
	.mail-server-section {
		padding: 50px 0;
	}

	.section-container {
		padding: 0 20px;
	}

	.category-wrapper {
		margin-bottom: 60px;
	}

	.category-header {
		margin-bottom: 30px;
	}

	.category-icon {
		width: 50px;
		height: 50px;
		margin-right: 15px;
	}

	.category-icon i {
		font-size: 22px;
	}

	.category-title {
		font-size: 24px;
		letter-spacing: 1px;
	}

	.software-grid,.mta-grid {
		grid-template-columns: 1fr;
	}

	.software-item {
		padding: 25px;
	}

	.software-name {
		font-size: 20px;
	}
}

@media (max-width:480px) {
	.category-title {
		font-size: 20px;
	}

	.software-name {
		font-size: 18px;
	}

	.software-description {
		font-size: 14px;
	}
}

.faq-card[open] summary span {
	transform: rotate(90deg);
}

.faq-card summary span {
	transition: transform 0.3s ease;
}

.performance-card {
	transition: all 0.3s ease;
}

.performance-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgb(0 0 0 / .1);
}

.stat-counter {
	position: relative;
	overflow: hidden;
}

.stat-counter::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);
	animation: shine 3s infinite;
}

@keyframes shine {
	to {
		left: 100%;
	}
}

.feature-icon {
	transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
	transform: scale(1.1) rotate(5deg);
}

.comparison-highlight {
	position: relative;
}

.comparison-highlight::after {
	content: '★';
	position: absolute;
	top: -10px;
	right: -10px;
	color: #F53;
	font-size: 24px;
}

.tech-stack-item {
	transition: all 0.3s ease;
	border-left: 4px solid #fff0;
}

.tech-stack-item:hover {
	border-left-color: #F53;
	background: #fff5f3;
	transform: translateX(8px);
}

.testimonial-card {
	background: linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%);
}

.metric-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: .75rem;
	font-weight: 600;
}

#performance-comparison .feature-item {
	display: flex;
	flex-direction: column;
}

#performance-comparison .bg-\[\#1C2120\] {
	background-color: #ffffff!important;
	border: 2px solid #1a1a1a!important;
	box-shadow: 10px 10px 0 rgb(0 0 0 / .05);
}

#performance-comparison thead.bg-\[\#2A2F2E\] {
	background-color: transparent!important;
}

#performance-comparison th {
	color: #94a3b8!important;
	border-bottom: 1px solid #e2e8f0!important;
}

#performance-comparison th:last-child {
	color: #FF5533!important;
}

#performance-comparison tbody tr {
	border-bottom: 1px solid #f1f5f9!important;
	background-color: transparent!important;
}

#performance-comparison td {
	color: #64748b!important;
	padding: 1.5rem;
}

#performance-comparison td:last-child {
	color: #1a1a1a!important;
	font-weight: 900;
}

#performance-comparison tbody tr:hover {
	background-color: #fff7f5!important;
}

.dev-environment-wrapper {
	background: linear-gradient(135deg,#000000 0%,#1a1a1a 100%);
	padding: 80px 20px;
	position: relative;
	overflow: hidden;
}

.dev-environment-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg,transparent,#ff5533,transparent);
}

.dev-environment-container {
	max-width: 1200px;
	margin: 0 auto;
}

.dev-environment-header {
	text-align: center;
	margin-bottom: 60px;
}

.dev-environment-title {
	font-size: 3rem;
	color: #fff;
	margin-bottom: 20px;
	font-weight: 700;
}

.dev-environment-subtitle {
	font-size: 1.25rem;
	color: #f7d3cb;
	max-width: 800px;
	margin: 0 auto;
}

.dev-environment-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 30px;
	margin-top: 50px;
}

.dev-environment-card {
	background: rgb(33 99 114 / 37%);
	border: 1px solid rgb(255 85 51 / .2);
	border-radius: 12px;
	padding: 35px;
	transition: all 0.3s ease;
}

.dev-environment-card:hover {
	transform: translateY(-5px);
	border-color: #f53;
	box-shadow: 0 10px 40px rgb(255 85 51 / .2);
}

.dev-environment-card-title {
	font-size: 1.5rem;
	color: #f53;
	margin-bottom: 15px;
	font-weight: 600;
}

.dev-environment-card-text {
	color: #f7d3cb;
	line-height: 1.8;
}

.infrastructure-zone {
	background: #f7d3cb;
	padding: 80px 20px;
}

.infrastructure-content-box {
	max-width: 1200px;
	margin: 0 auto;
}

.infrastructure-heading-main {
	font-size: 2.8rem;
	color: #000;
	text-align: center;
	margin-bottom: 25px;
	font-weight: 700;
}

.infrastructure-description {
	font-size: 1.2rem;
	color: #333;
	text-align: center;
	max-width: 900px;
	margin: 0 auto 50px;
}

.infrastructure-features-list {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
	gap: 25px;
}

.infrastructure-feature-block {
	background: #fff;
	padding: 30px;
	border-radius: 10px;
	border-left: 4px solid #f53;
	box-shadow: 0 4px 15px rgb(0 0 0 / .1);
}

.infrastructure-feature-heading {
	font-size: 1.3rem;
	color: #f53;
	margin-bottom: 12px;
	font-weight: 600;
}

.infrastructure-feature-detail {
	color: #333;
	line-height: 1.7;
}

.hardware-specs-area {
	background: #fff;
	padding: 80px 20px;
}

.hardware-specs-wrapper {
	max-width: 1200px;
	margin: 0 auto;
}

.hardware-specs-main-title {
	font-size: 2.8rem;
	color: #000;
	text-align: center;
	margin-bottom: 20px;
	font-weight: 700;
}

.hardware-specs-table-container {
	overflow-x: auto;
	background: rgb(255 255 255 / .05);
	border-radius: 12px;
	padding: 30px;
}

.hardware-specs-table {
	width: 100%;
	border-collapse: collapse;
}

.hardware-specs-table-header {
	background: #f53;
}

.hardware-specs-table-header-cell {
	padding: 20px;
	text-align: left;
	color: #fff;
	font-weight: 600;
	font-size: 1.1rem;
	background: #000;
}

.hardware-specs-table-row {
	border-bottom: 1px solid rgb(255 85 51 / .2);
}

.hardware-specs-table-row:hover {
	background: rgb(255 85 51 / .1);
}

.hardware-specs-table-cell {
	padding: 18px 20px;
	color: #f7d3cb;
	background: #1e3e58;
}

.gpu-compute-section {
	background: linear-gradient(135deg,#1a1a1a 0%,#000000 100%);
	padding: 80px 20px;
}

.gpu-compute-content {
	max-width: 1800px;
	margin: 0 auto;
}

.gpu-compute-title-main {
	font-size: 2.8rem;
	color: #f53;
	text-align: center;
	margin-bottom: 30px;
	font-weight: 700;
}

.gpu-compute-intro-text {
	font-size: 1.2rem;
	color: #f7d3cb;
	text-align: center;
	max-width: 900px;
	margin: 0 auto 50px;
	line-height: 1.8;
}

.gpu-compute-benefits-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 30px;
}

.gpu-compute-benefit-card {
	background: rgb(247 211 203 / .05);
	border: 2px solid rgb(255 85 51 / .3);
	border-radius: 10px;
	padding: 35px;
	transition: all 0.3s ease;
}

.gpu-compute-benefit-card:hover {
	border-color: #f53;
	background: rgb(247 211 203 / .1);
}

.gpu-compute-benefit-title {
	font-size: 1.4rem;
	color: #f53;
	margin-bottom: 15px;
	font-weight: 600;
}

.gpu-compute-benefit-description {
	color: #f7d3cb;
	line-height: 1.8;
}

.game-optimization-container {
	background: #f7d3cb;
	padding: 80px 20px;
}

.game-optimization-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.game-optimization-header-text {
	font-size: 2.8rem;
	color: #000;
	text-align: center;
	margin-bottom: 50px;
	font-weight: 700;
}

.game-optimization-table-wrapper {
	overflow-x: auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgb(0 0 0 / .1);
}

.game-optimization-table {
	width: 100%;
	border-collapse: collapse;
}

.game-optimization-table-thead {
	background: #000;
}

.game-optimization-table-th {
	padding: 20px;
	text-align: left;
	color: #f53;
	font-weight: 600;
	font-size: 1.1rem;
}

.game-optimization-table-tr {
	border-bottom: 1px solid #f0f0f0;
}

.game-optimization-table-tr:hover {
	background: rgb(255 85 51 / .05);
}

.game-optimization-table-td {
	padding: 18px 20px;
	color: #333;
}

.network-security-block {
	background: #000;
	padding: 80px 20px;
}

.network-security-container {
	max-width: 1200px;
	margin: 0 auto;
}

.network-security-split-layout {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 50px;
}

.network-security-column {
	background: rgb(255 255 255 / .03);
	padding: 40px;
	border-radius: 12px;
	border: 1px solid rgb(255 85 51 / .2);
}

.network-security-column-title {
	font-size: 2.2rem;
	color: #f53;
	margin-bottom: 25px;
	font-weight: 700;
}

.network-security-point-list {
	list-style: none;
}

.network-security-point-item {
	color: #f7d3cb;
	margin-bottom: 20px;
	padding-left: 30px;
	position: relative;
	line-height: 1.8;
}

.network-security-point-item::before {
	content: '▶';
	position: absolute;
	left: 0;
	color: #f53;
}

.faq-section-wrapper {
	background: #f7d3cb;
	padding: 80px 20px;
}

.faq-section-content {
	max-width: 900px;
	margin: 0 auto;
}

.faq-section-title {
	font-size: 2.8rem;
	color: #000;
	text-align: center;
	margin-bottom: 50px;
	font-weight: 700;
}

.faq-item-container {
	background: #fff;
	margin-bottom: 20px;
	border-radius: 10px;
	overflow: hidden;
	border: 2px solid #fff0;
	transition: all 0.3s ease;
}

.faq-item-container:hover {
	border-color: #f53;
}

.faq-question-header {
	padding: 25px 30px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
}

.faq-question-text {
	font-size: 1.2rem;
	color: #000;
	font-weight: 600;
}

.faq-toggle-icon {
	font-size: 1.5rem;
	color: #f53;
	font-weight: 700;
}

.faq-answer-content {
	padding: 0 30px 25px;
	color: #333;
	line-height: 1.8;
}

.cta-final-section {
	background: linear-gradient(135deg,#ff5533 0%,#ff3311 100%);
	padding: 80px 20px;
	text-align: center;
}

.cta-final-container {
	max-width: 800px;
	margin: 0 auto;
}

.cta-final-heading {
	font-size: 2.8rem;
	color: #fff;
	margin-bottom: 25px;
	font-weight: 700;
}

.cta-final-description {
	font-size: 1.2rem;
	color: #f7d3cb;
	margin-bottom: 40px;
	line-height: 1.8;
}

.cta-final-button {
	display: inline-block;
	padding: 18px 45px;
	background: #000;
	color: #fff;
	text-decoration: none;
	border-radius: 8px;
	font-size: 1.2rem;
	font-weight: 600;
	transition: all 0.3s ease;
}

.cta-final-button:hover {
	background: #fff;
	color: #f53;
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgb(0 0 0 / .3);
}

@media (max-width:768px) {
	.dev-environment-title,.infrastructure-heading-main,.hardware-specs-main-title,.gpu-compute-title-main,.game-optimization-header-text,.faq-section-title,.cta-final-heading {
		font-size: 2rem;
	}

	.network-security-column-title {
		font-size: 1.8rem;
	}
}

.min-500 {
	min-height: 500px!important;
}

.ml-configs-section {
	font-family: 'Inter',sans-serif;
	background: #ffe8e7;
}

.ml-table-wrapper {
	border: 1px solid #e5e7eb;
}

.ml-data-table thead th {
	background-color: #b69eff;
	color: #1a1a1a;
	padding: 20px;
	font-size: 1.1rem;
	font-weight: 800;
	border-bottom: 2px solid #f3f4f6;
}

.ml-data-table tbody td {
	padding: 16px 20px;
	border-bottom: 1px solid #f3f4f6;
	color: #4b5563;
	vertical-align: middle;
}

.ml-data-table .feature-label {
	font-weight: 700;
	color: #111827;
	background-color: #fafafa;
	width: 20%;
}

.ml-data-table .price-text {
	font-size: 1.25rem;
	font-weight: 800;
	color: #111827;
}

.ml-btn {
	display: inline-block;
	background-color: #f53;
	color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.3s ease;
	font-size: .9rem;
	text-align: center;
}

.ml-btn:hover {
	background-color: #e64a2e;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgb(255 85 51 / .3);
	color: #fff;
}

@media (max-width:768px) {
	.ml-data-table {
		min-width: 800px;
	}
}

.ml-benefits-section {
	padding: 80px 0;
	background-color: #fff;
}

.ml-benefit-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 32px 24px;
	text-align: left;
	transition: all 0.3s ease;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / .05);
	height: 100%;
}

.ml-benefit-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgb(0 0 0 / .1);
	border-color: #f53;
}

.ml-icon-wrapper {
	width: 60px;
	height: 60px;
	background-color: #fff1ee;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.ml-icon-wrapper svg {
	width: 30px;
	height: 30px;
	color: #f53;
}

.ml-benefit-card h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111827;
	margin-bottom: 12px;
}

.ml-benefit-card p {
	color: #4b5563;
	font-size: .95rem;
	line-height: 1.6;
}

.ml-inventory-section {
	padding: 80px 0;
	background-color: #1C2120;
	position: relative;
}

.ml-inventory-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 25px rgb(0 0 0 / .2);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.ml-inventory-header {
	background-color: #f53;
	padding: 30px;
	text-align: center;
	color: #fff;
}

.ml-inventory-header h3 {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 800;
	margin-bottom: 5px;
}

.ml-inventory-header span {
	font-size: .9rem;
	color: rgb(255 255 255 / .9);
	font-weight: 500;
}

.ml-inventory-body {
	padding: 30px;
	flex-grow: 1;
}

.ml-gpu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ml-gpu-list li {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f3f4f6;
}

.ml-gpu-list li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.ml-gpu-list strong {
	display: block;
	color: #111827;
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 5px;
	position: relative;
	padding-left: 20px;
}

.ml-gpu-list strong::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #f53;
	font-weight: 700;
}

.ml-gpu-list p {
	color: #6b7280;
	font-size: .9rem;
	margin: 0;
	padding-left: 20px;
	line-height: 1.5;
}

.ml-btn-large {
	padding: 16px 40px;
	font-size: 1.1rem;
	border: 2px solid #fff0;
}

.ml-btn-large:hover {
	background-color: #fff0;
	border-color: #f53;
	color: #f53;
}

.ai-icon-box {
	width: 70px;
	height: 70px;
	background: rgb(255 85 51 / .1);
	color: var(--primary-color);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.sv-card:hover .ai-icon-box {
	transform: scale(1.1) rotate(5deg);
	background: var(--primary-color);
	color: #fff;
}

.ai-tech-card {
	background: rgb(255 255 255 / .05);
	border: 1px solid rgb(255 255 255 / .1);
	padding: 2rem;
	border-radius: 12px;
	transition: all 0.3s ease;
}

.ai-tech-card:hover {
	background: rgb(255 255 255 / .1);
	border-color: var(--primary-color);
	transform: translateY(-5px);
}

.ai-spec-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ai-spec-list li {
	padding: 8px 0;
	border-bottom: 1px solid rgb(255 255 255 / .1);
	color: #9ca3af;
	font-size: .95rem;
}

.ai-spec-list li:last-child {
	border-bottom: none;
}

.ai-spec-list strong {
	color: #fff;
	margin-right: 5px;
}

.ai-map-placeholder {
	width: 100%;
	height: 300px;
	background-color: #f3f4f6;
	border-radius: 16px;
	border: 2px dashed #cbd5e1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: radial-gradient(#cbd5e1 1px,transparent 1px);
	background-size: 20px 20px;
}

.ai-use-case-card {
	background: #fff;
	padding: 1.5rem;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / .05);
	transition: all 0.3s ease;
	height: 100%;
}

.ai-use-case-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgb(255 85 51 / .15);
	border-color: var(--primary-color);
}

.faq-card summary {
	list-style: none;
}

.faq-card[open] .accordion-arrow {
	transform: rotate(90deg);
}

.accordion-arrow {
	transition: transform 0.2s ease;
}

@media (max-width:768px) {
	.ai-map-placeholder {
		height: 200px;
		margin-top: 2rem;
	}

	.ai-tech-card {
		margin-bottom: 1rem;
	}
}

.latency-feature-box {
	background: #fff;
	padding: 1.25rem;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	display: flex;
	align-items: center;
	gap: 1rem;
	transition: all 0.3s ease;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / .02);
}

.latency-feature-box:hover {
	transform: translateY(-3px);
	border-color: var(--primary-color);
	box-shadow: 0 10px 15px -3px rgb(255 85 51 / .15);
}

.latency-icon {
	width: 45px;
	height: 45px;
	background: rgb(255 85 51 / .1);
	color: var(--primary-color);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
}

.network-map-container {
	position: relative;
	width: 100%;
	height: 350px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 20px 50px rgb(0 0 0 / .05);
	overflow: hidden;
	border: 1px solid #f3f4f6;
}

.map-grid {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(#d1d5db 1px,transparent 1px);
	background-size: 30px 30px;
	opacity: .5;
}

.network-lines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.line-path {
	stroke: var(--primary-color);
	stroke-width: 2;
	stroke-dasharray: 10;
	opacity: .3;
	animation: dash 30s linear infinite;
}

@keyframes dash {
	to {
		stroke-dashoffset: -1000;
	}
}

.map-node {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.node-na {
	top: 38%;
	left: 24%;
}

.node-eu {
	top: 30%;
	left: 46%;
}

.node-as {
	top: 46%;
	left: 69%;
}

.node-sa {
	top: 61%;
	left: 17%;
}

.node-af {
	top: 62%;
	left: 48%;
}

.node-au {
	top: 75%;
	left: 71%;
}

.node-dot {
	width: 12px;
	height: 12px;
	background-color: var(--primary-color);
	border-radius: 50%;
	position: relative;
	z-index: 2;
	box-shadow: 0 0 10px rgb(255 85 51 / .5);
}

.node-dot.hub {
	width: 16px;
	height: 16px;
	background-color: var(--accent-color);
}

.node-pulse {
	position: absolute;
	top: 17%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgb(255 85 51 / .6);
	z-index: 1;
	animation: pulse-ring 2s cubic-bezier(.215,.61,.355,1) infinite;
}

.hub-pulse {
	background: rgb(3 76 145 / .6);
}

.node-label {
	margin-top: 8px;
	font-size: .75rem;
	font-weight: 700;
	color: var(--text-light);
	background: rgb(255 255 255 / .9);
	padding: 2px 6px;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgb(0 0 0 / .05);
	opacity: 0;
	transform: translateY(-5px);
	animation: fade-in-up 2s ease forwards;
	animation-delay: 1s;
}

@keyframes pulse-ring {
	0% {
		width: 12px;
		height: 12px;
		opacity: .8;
	}

	100% {
		width: 60px;
		height: 60px;
		opacity: 0;
	}
}

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

.node-na .node-pulse {
	animation-delay: 0s;
}

.node-eu .node-pulse {
	animation-delay: 0.5s;
}

.node-as .node-pulse {
	animation-delay: 1s;
}

.node-sa .node-pulse {
	animation-delay: 1.5s;
}

.node-au .node-pulse {
	animation-delay: 2s;
}

@media (max-width:768px) {
	.network-map-container {
		height: 250px;
	}

	.node-label {
		display: none;
	}
}

.bg-background-solution-accent {
	background-color: #ffdad3!important;
}

/* Custom CSS for Discord Bot Hosting & Infrastructure Page */
/* Colors used: #1C2120 (Dark BG), #FF5533 (Brand Orange) */

:root {
    --brand-dark: #1C2120;
    --brand-orange: #FF5533;
    --brand-gray: #2A2F2E;
}

.text-brand-orange {
    color: var(--brand-orange);
}

.bg-brand-dark {
    background-color: var(--brand-dark);
}

/* Feature Cards for Dark Mode Grid */
.bot-feature-card {
    background-color: var(--brand-gray);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bot-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 85, 51, 0.3);
}

.bot-feature-card .icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: rgba(255, 85, 51, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* Enhancing Tailwind's line-height for readability on heavy text sections */
.leading-relaxed {
    line-height: 1.75;
}

/* Utility to mix blend images for a sleeker dark header look */
.mix-blend-luminosity {
    mix-blend-mode: luminosity;
}

.sol-image {
    object-position: left center;
}

.font-white {
    font-weight: 900;
    color: #ffffff !important;
}

/* FAQ Section Styles - /assets/css/faq.css */
.faq-section-wrapper {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #ffffff;
    border-top: 1px solid #e5e7eb;
}

.faq-container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.faq-heading {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 900;
    color: #111827;
    text-align: center;
    margin-bottom: 3rem;
}

.faq-item {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: box-shadow 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.faq-question {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.75rem;
}

.faq-answer p {
    color: #4b5563;
    line-height: 1.625;
}