/* =============================================
   Header + Banner Alignment (Shared Grid)
   ============================================= */

.header-bar .container-fluid,
.home-banner .container {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: 40px !important;
	padding-right: 40px !important;
}

@media (max-width: 991px) {
	.header-bar .container-fluid,
	.home-banner .container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* =============================================
   Home Banner - Vertical Center + Animations
   ============================================= */

.home-banner {
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.home-banner > .container {
	width: 100%;
}

.home-banner .col-lg-6.align-self-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.btitle {
	color: rgba(3, 45, 32, 1) !important;
	position: relative;
	animation: btitleEntrance 1s cubic-bezier(0.23, 1, 0.32, 1) both, btitleFloat 4s ease-in-out 1.2s infinite;
	letter-spacing: -0.5px;
}

.btitle::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 80px;
	height: 4px;
	background: linear-gradient(90deg, rgba(93, 229, 152, 1), rgba(3, 45, 32, 1));
	border-radius: 2px;
	animation: underlineReveal 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.5s both, underlineGlow 3s ease-in-out 1.7s infinite;
}

@keyframes underlineReveal {
	0% { width: 0; opacity: 0; }
	100% { width: 80px; opacity: 1; }
}

@keyframes underlineGlow {
	0%, 100% { box-shadow: 0 0 8px rgba(93, 229, 152, 0.5); }
	50% { box-shadow: 0 0 20px rgba(93, 229, 152, 0.9), 0 0 40px rgba(93, 229, 152, 0.4); }
}

@keyframes btitleEntrance {
	0% {
		opacity: 0;
		transform: translateY(50px) scale(0.92);
		filter: blur(10px);
	}
	60% {
		transform: translateY(-12px) scale(1.02);
		filter: blur(0);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

@keyframes btitleFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

.bcontent {
	color: rgba(88, 101, 95, 1) !important;
	position: relative;
	animation: bcontentEntrance 1s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both;
	line-height: 1.8;
}

@keyframes bcontentEntrance {
	0% {
		opacity: 0;
		transform: translateY(30px);
		filter: blur(8px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

.bcontent::first-letter {
	font-size: 1.4em;
	font-weight: 700;
	color: rgba(3, 45, 32, 1);
}

.home-banner .col-lg-6:first-child {
	position: relative;
}

.home-banner .col-lg-6:first-child::before {
	content: '';
	position: absolute;
	top: -20px;
	left: -20px;
	width: 120%;
	height: 120%;
	background: radial-gradient(ellipse at 30% 20%, rgba(93, 229, 152, 0.12), transparent 60%);
	pointer-events: none;
	animation: ambientGlow 6s ease-in-out infinite;
}

@keyframes ambientGlow {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

.home-banner .btitle,
.home-banner .bcontent {
	text-shadow: 0 2px 20px rgba(255, 255, 255, 0.5);
}

@media (max-width: 767px) {
	.home-banner {
		min-height: auto;
		padding: 60px 0;
	}
	.btitle {
		font-size: 32px !important;
	}
	.bcontent {
		font-size: 16px !important;
	}
}

/* =============================================
   Feature Highlights - Super Cool Animations
   ============================================= */

/* ===== Section Container ===== */
.feature-highlights {
	position: relative;
	padding: 80px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f8faf9 50%, #ffffff 100%);
}

/* Animated background blobs */
.feature-highlights::before,
.feature-highlights::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

.feature-highlights::before {
	width: 400px;
	height: 400px;
	background: rgba(93, 229, 152, 0.15);
	top: -100px;
	left: -100px;
	animation: blobFloat1 12s ease-in-out infinite;
}

.feature-highlights::after {
	width: 350px;
	height: 350px;
	background: rgba(3, 45, 32, 0.08);
	bottom: -80px;
	right: -80px;
	animation: blobFloat2 14s ease-in-out infinite;
}

@keyframes blobFloat1 {
	0%, 100% { transform: translate(0, 0); }
	33% { transform: translate(50px, 30px); }
	66% { transform: translate(-30px, 50px); }
}

@keyframes blobFloat2 {
	0%, 100% { transform: translate(0, 0); }
	33% { transform: translate(-40px, -30px); }
	66% { transform: translate(30px, -50px); }
}

/* Background glow effect */
.feature-bg-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 700px;
	height: 700px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.10) 0%, transparent 70%);
	animation: bgGlowPulse 6s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes bgGlowPulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
	50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* ===== Header Section ===== */
.feature-header {
	text-align: center;
	margin-bottom: 60px;
	position: relative;
	z-index: 1;
	animation: headerFadeSlide 1s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes headerFadeSlide {
	0% { opacity: 0; transform: translateY(-30px); }
	100% { opacity: 1; transform: translateY(0); }
}

.feature-subtitle {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(93, 229, 152, 1);
	padding: 10px 28px;
	border: 1.5px solid rgba(93, 229, 152, 0.4);
	border-radius: 50px;
	background: rgba(93, 229, 152, 0.08);
	position: relative;
	overflow: hidden;
	animation: subtitleFloat 3s ease-in-out infinite, subtitleFadeIn 0.8s ease-out 0.3s both;
}

@keyframes subtitleFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

@keyframes subtitleFadeIn {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

.feature-subtitle::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(93, 229, 152, 0.35), transparent);
	animation: subtitleShimmer 3s infinite;
}

@keyframes subtitleShimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}

.feature-title {
	font-size: 42px;
	font-weight: 700;
	color: rgba(3, 45, 32, 1);
	margin: 20px 0 0;
	line-height: 1.2;
	animation: titleFadeIn 0.8s ease-out 0.5s both;
}

@keyframes titleFadeIn {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

.gradient-text {
	background: linear-gradient(135deg, #5de598 0%, #032d20 50%, #5de598 100%);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* ===== Feature Row ===== */
.feature-row {
	display: flex;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
	perspective: 1200px;
}

/* ===== Feature Card ===== */
.feature-card {
	position: relative;
	flex: 1;
	min-width: 240px;
	max-width: 300px;
	padding: 30px 5px 25px;
	background: #ffffff;
	border: 2px solid rgba(3, 45, 32, 0.10);
	border-radius: 16px;
	text-align: left;
	cursor: pointer;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	overflow: hidden;
	transform-style: preserve-3d;
	animation: cardEntrance 0.8s cubic-bezier(0.23, 1, 0.32, 1) both, cardFloat 5s ease-in-out 0.8s infinite;
}

/* Stagger entrance + float delays */
.feature-card.card-1 { animation-delay: 0s, 0.8s; }
.feature-card.card-2 { animation-delay: 0.15s, 0.95s; }
.feature-card.card-3 { animation-delay: 0.3s, 1.1s; }
.feature-card.card-4 { animation-delay: 0.45s, 1.25s; }
.feature-card.card-5 { animation-delay: 0.6s, 1.4s; }

@keyframes cardEntrance {
	0% {
		opacity: 0;
		transform: translateY(60px) scale(0.9);
	}
	60% {
		transform: translateY(-10px) scale(1.02);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes cardFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* ===== Card Inner (left-right layout) ===== */
.card-inner {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	position: relative;
	z-index: 1;
}

.card-icon-col {
	flex-shrink: 0;
}

.card-content-col {
	flex: 1;
	min-width: 0;
}

.card-content-col .feature-card-title {
	display: block;
}

.card-content-col .feature-card-desc {
	display: block;
	margin-top: 6px;
}

/* ===== Card Glow Effect ===== */
.card-glow {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.18) 0%, transparent 60%);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
	z-index: 0;
}

.feature-card:hover .card-glow {
	opacity: 1;
	animation: glowRotate 2s linear infinite;
}

@keyframes glowRotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ===== Card Shine Effect ===== */
.card-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	transform: skewX(-25deg);
	pointer-events: none;
	z-index: 3;
}

.feature-card:hover .card-shine {
	animation: shineSweep 0.8s ease-out forwards;
}

@keyframes shineSweep {
	0% { left: -100%; }
	100% { left: 200%; }
}

/* ===== Flowing Border ===== */
.card-border-flow {
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	border-radius: 18px;
	background: linear-gradient(45deg, transparent, rgba(93, 229, 152, 0.5), transparent, rgba(93, 229, 152, 0.5), transparent, rgba(93, 229, 152, 0.3), transparent);
	background-size: 400% 400%;
	opacity: 0;
	z-index: -1;
	transition: opacity 0.4s ease;
}

.feature-card:hover .card-border-flow {
	opacity: 1;
	animation: borderFlow 3s linear infinite;
}

@keyframes borderFlow {
	0% { background-position: 0% 50%; }
	100% { background-position: 400% 50%; }
}

/* ===== Hover Line ===== */
.card-hover-line {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, rgba(93, 229, 152, 1), transparent);
	transform: translateX(-50%);
	transition: width 0.4s ease;
	border-radius: 2px;
	z-index: 2;
}

.feature-card:hover .card-hover-line {
	width: 85%;
	box-shadow: 0 0 15px rgba(93, 229, 152, 0.6);
}

/* ===== Hover Effects ===== */
.feature-card:hover {
	transform: translateY(-18px) scale(1.03);
	border-color: rgba(93, 229, 152, 0.5);
	box-shadow: 
		0 25px 70px rgba(3, 45, 32, 0.18),
		0 0 50px rgba(93, 229, 152, 0.18),
		inset 0 0 40px rgba(93, 229, 152, 0.06);
	animation-play-state: paused;
}

/* ===== Corner Decorations ===== */
.corner-deco {
	position: absolute;
	width: 22px;
	height: 22px;
	transition: all 0.4s ease;
	z-index: 2;
	pointer-events: none;
}

.corner-deco.top-right {
	top: 10px;
	right: 10px;
	border-top: 2px solid rgba(3, 45, 32, 0.20);
	border-right: 2px solid rgba(3, 45, 32, 0.20);
	border-radius: 0 8px 0 0;
}

.corner-deco.bottom-left {
	bottom: 10px;
	left: 10px;
	border-bottom: 2px solid rgba(3, 45, 32, 0.20);
	border-left: 2px solid rgba(3, 45, 32, 0.20);
	border-radius: 0 0 0 8px;
}

.feature-card:hover .corner-deco.top-right {
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	border-color: rgba(93, 229, 152, 0.7);
	box-shadow: 0 0 15px rgba(93, 229, 152, 0.4);
}

.feature-card:hover .corner-deco.bottom-left {
	bottom: 6px;
	left: 6px;
	width: 28px;
	height: 28px;
	border-color: rgba(93, 229, 152, 0.7);
	box-shadow: 0 0 15px rgba(93, 229, 152, 0.4);
}

/* ===== Feature Icon (left column) ===== */
.feature-icon-wrap {
	position: relative;
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border: 2px solid rgba(3, 45, 32, 0.10);
	border-radius: 50%;
	transition: all 0.5s ease;
}

.feature-card:hover .icon-ring {
	border-color: rgba(93, 229, 152, 0.7);
	width: 56px;
	height: 56px;
	box-shadow: 
		0 0 20px rgba(93, 229, 152, 0.35),
		inset 0 0 15px rgba(93, 229, 152, 0.12);
	animation: ringPulse 1.5s ease-in-out infinite;
}

@keyframes ringPulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.08); }
}

/* Icon background pulse */
.icon-bg-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.12);
	opacity: 0;
	transition: all 0.5s ease;
}

.feature-card:hover .icon-bg-pulse {
	opacity: 1;
	animation: iconBgPulse 1.5s ease-in-out infinite;
}

@keyframes iconBgPulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
	50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

.feature-icon {
	position: relative;
	z-index: 1;
	width: 26px;
	height: 26px;
	transition: all 0.5s ease;
	filter: drop-shadow(0 2px 6px rgba(3, 45, 32, 0.15));
}

.feature-card:hover .feature-icon {
	transform: scale(1.25) rotate(10deg);
	filter: drop-shadow(0 4px 15px rgba(93, 229, 152, 0.55));
	animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {
	0%, 100% { transform: scale(1.25) rotate(10deg); }
	25% { transform: scale(1.35) rotate(-8deg); }
	50% { transform: scale(1.4) rotate(5deg); }
	75% { transform: scale(1.3) rotate(-3deg); }
}

/* ===== Particles ===== */
.icon-particles {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.particle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	background: rgba(93, 229, 152, 1);
	border-radius: 50%;
	opacity: 0;
	transition: all 0.6s ease;
	box-shadow: 0 0 6px rgba(93, 229, 152, 0.8);
}

.feature-card:hover .particle {
	opacity: 1;
	animation: particleFloat 1.5s ease-out infinite;
}

.feature-card:hover .particle.p1 { animation-delay: 0s; }
.feature-card:hover .particle.p2 { animation-delay: 0.2s; }
.feature-card:hover .particle.p3 { animation-delay: 0.4s; }
.feature-card:hover .particle.p4 { animation-delay: 0.6s; }
.feature-card:hover .particle.p5 { animation-delay: 0.8s; }

@keyframes particleFloat {
	0% { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { transform: translate(var(--tx, 30px), var(--ty, -30px)) scale(0); opacity: 0; }
}

.particle.p1 { --tx: 40px; --ty: -40px; }
.particle.p2 { --tx: -40px; --ty: -40px; }
.particle.p3 { --tx: 0px; --ty: -50px; }
.particle.p4 { --tx: 40px; --ty: 10px; }
.particle.p5 { --tx: -40px; --ty: 10px; }

/* ===== Card Title & Description ===== */
.feature-card-title {
	font-size: 17px;
	font-weight: 700;
	color: rgba(3, 45, 32, 1);
	margin: 0;
	line-height: 1.35;
	position: relative;
	z-index: 1;
	transition: all 0.4s ease;
	word-break: break-word;
}

.feature-card:hover .feature-card-title {
	color: rgba(3, 45, 32, 1);
	transform: translateY(-2px);
	text-shadow: 0 4px 20px rgba(93, 229, 152, 0.25);
}

.feature-card-desc {
	font-size: 13px;
	color: rgba(3, 45, 32, 0.65);
	line-height: 1.55;
	margin: 6px 0 0;
	position: relative;
	z-index: 1;
	transition: all 0.4s ease;
}

.feature-card:hover .feature-card-desc {
	color: rgba(3, 45, 32, 0.88);
}

/* ===== 3D Tilt Hover (CSS) ===== */
.feature-card:hover {
	transform: translateY(-18px) scale(1.03) rotateX(3deg) rotateY(-3deg);
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.feature-card {
		min-width: calc(33.33% - 16px);
		max-width: calc(33.33% - 16px);
	}
	.feature-highlights {
		padding: 60px 0;
	}
	.feature-title {
		font-size: 34px;
	}
}

@media (max-width: 991px) {
	.feature-card {
		min-width: calc(50% - 12px);
		max-width: calc(50% - 12px);
	}
	.feature-title {
		font-size: 30px;
	}
}

@media (max-width: 767px) {
	.feature-row {
		flex-direction: column;
		align-items: center;
	}
	.feature-card {
		min-width: 100%;
		max-width: 100%;
	}
	.feature-title {
		font-size: 26px;
	}
	.feature-highlights {
		padding: 40px 0;
	}
	.feature-header {
		margin-bottom: 40px;
	}
	.card-inner {
		gap: 12px;
	}
	.feature-card-title {
		font-size: 16px;
	}
	.feature-icon {
		width: 22px;
		height: 22px;
	}
	.feature-icon-wrap {
		width: 40px;
		height: 40px;
	}
	.icon-ring {
		width: 38px;
		height: 38px;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.feature-card,
	.feature-bg-glow,
	.feature-subtitle,
	.gradient-text,
	.feature-icon,
	.particle,
	.feature-highlights::before,
	.feature-highlights::after {
		animation: none !important;
	}
	.feature-card:hover {
		transform: translateY(-5px) scale(1.02) !important;
	}
}

/* =============================================
   What is Rupee Mountain? - Super Cool Section
   ============================================= */

.what-is-section {
	position: relative;
	padding: 50px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f4f7f5 40%, #ffffff 100%);
}

.what-bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}

.what-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.4;
}

.what-blob.blob-1 {
	width: 350px;
	height: 350px;
	background: rgba(93, 229, 152, 0.25);
	top: -80px;
	left: -60px;
	animation: blobFloat1 10s ease-in-out infinite;
}

.what-blob.blob-2 {
	width: 300px;
	height: 300px;
	background: rgba(3, 45, 32, 0.12);
	bottom: -60px;
	right: -40px;
	animation: blobFloat2 12s ease-in-out infinite;
}

.what-blob.blob-3 {
	width: 250px;
	height: 250px;
	background: rgba(93, 229, 152, 0.15);
	top: 40%;
	left: 50%;
	animation: blobFloat3 14s ease-in-out infinite;
}

@keyframes blobFloat1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(40px, 30px) scale(1.1); }
	66% { transform: translate(-20px, 50px) scale(0.95); }
}

@keyframes blobFloat2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(-30px, -40px) scale(1.05); }
	66% { transform: translate(20px, -20px) scale(1.1); }
}

@keyframes blobFloat3 {
	0%, 100% { transform: translate(-50%, 0) scale(1); }
	50% { transform: translate(-30%, -30px) scale(1.15); }
}

/* ===== Section Header ===== */
.what-header {
	text-align: center;
	margin-bottom: 60px;
	position: relative;
	z-index: 1;
}

.what-subtitle {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(93, 229, 152, 1);
	padding: 6px 20px;
	background: rgba(93, 229, 152, 0.12);
	border-radius: 30px;
	margin-bottom: 16px;
	animation: whatSubtitleIn 0.8s ease-out both;
	position: relative;
	overflow: hidden;
}

.what-subtitle::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	animation: whatShimmer 3s infinite;
}

@keyframes whatShimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}

@keyframes whatSubtitleIn {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

.what-title {
	font-size: 42px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 16px;
	line-height: 1.2;
	animation: whatTitleIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.15s both;
	background: linear-gradient(135deg, rgba(3, 45, 32, 1) 0%, rgba(3, 45, 32, 1) 50%, rgba(93, 229, 152, 0.8) 100%);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: whatTitleIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.15s both, whatTitleShimmer 4s ease-in-out 1.5s infinite;
}

@keyframes whatTitleIn {
	0% {
		opacity: 0;
		transform: translateY(40px) scale(0.95);
		filter: blur(10px);
	}
	60% {
		transform: translateY(-8px) scale(1.02);
		filter: blur(0);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

@keyframes whatTitleShimmer {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.what-title-underline {
	width: 70px;
	height: 4px;
	margin: 0 auto 24px;
	background: linear-gradient(90deg, rgba(93, 229, 152, 1), rgba(3, 45, 32, 1));
	border-radius: 2px;
	animation: whatUnderline 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s both, whatUnderlineGlow 3s ease-in-out 1.5s infinite;
}

@keyframes whatUnderline {
	0% { width: 0; opacity: 0; }
	100% { width: 70px; opacity: 1; }
}

@keyframes whatUnderlineGlow {
	0%, 100% { box-shadow: 0 0 6px rgba(93, 229, 152, 0.5); }
	50% { box-shadow: 0 0 18px rgba(93, 229, 152, 0.9); }
}

.what-desc {
	font-size: 16px;
	color: rgba(88, 101, 95, 1);
	line-height: 1.7;
	max-width: 700px;
	margin: 0 auto;
	animation: whatDescIn 0.9s ease-out 0.35s both;
}

@keyframes whatDescIn {
	0% { opacity: 0; transform: translateY(25px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ===== Cards Grid ===== */
.what-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	position: relative;
	z-index: 1;
}

/* ===== What Card ===== */
.what-card {
	position: relative;
	background: #ffffff;
	border-radius: 20px;
	padding: 40px 30px 35px;
	text-align: center;
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	overflow: hidden;
	cursor: pointer;
	border: 2px solid rgba(3, 45, 32, 0.08);
	animation: whatCardEntrance 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.what-card-1 { animation-delay: 0.1s; }
.what-card-2 { animation-delay: 0.25s; }
.what-card-3 { animation-delay: 0.4s; }
.what-card-4 { animation-delay: 0.55s; }

@keyframes whatCardEntrance {
	0% {
		opacity: 0;
		transform: translateY(50px) scale(0.9) rotateX(-5deg);
	}
	60% {
		transform: translateY(-10px) scale(1.02) rotateX(2deg);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1) rotateX(0);
	}
}

.what-card-glow {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.15), transparent 50%);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
	z-index: 0;
}

.what-card:hover .what-card-glow {
	opacity: 1;
	animation: whatGlowPulse 2s ease-in-out infinite;
}

@keyframes whatGlowPulse {
	0%, 100% { transform: scale(1); opacity: 0.8; }
	50% { transform: scale(1.15); opacity: 1; }
}

.what-card-border {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, rgba(93, 229, 152, 1), rgba(3, 45, 32, 1), rgba(93, 229, 152, 1), transparent);
	background-size: 200% 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.what-card:hover .what-card-border {
	opacity: 1;
	animation: whatBorderFlow 2s linear infinite;
}

@keyframes whatBorderFlow {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.what-card-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	pointer-events: none;
	transition: left 0.8s ease;
}

.what-card:hover .what-card-shine {
	left: 150%;
	transition: left 0.8s ease;
}

.what-card:hover {
	transform: translateY(-15px) scale(1.04);
	border-color: rgba(93, 229, 152, 0.5);
	box-shadow: 
		0 25px 60px rgba(3, 45, 32, 0.12),
		0 0 40px rgba(93, 229, 152, 0.15),
		inset 0 0 30px rgba(93, 229, 152, 0.05);
}

/* ===== Icon ===== */
.what-icon-wrap {
	position: relative;
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.what-icon-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border: 2px solid rgba(3, 45, 32, 0.10);
	border-radius: 50%;
	transition: all 0.5s ease;
}

.what-card:hover .what-icon-ring {
	border-color: rgba(93, 229, 152, 0.7);
	width: 78px;
	height: 78px;
	animation: whatRingSpin 3s linear infinite, whatRingPulse 1.5s ease-in-out infinite;
	box-shadow: 0 0 20px rgba(93, 229, 152, 0.4);
}

@keyframes whatRingSpin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes whatRingPulse {
	0%, 100% { box-shadow: 0 0 15px rgba(93, 229, 152, 0.4); }
	50% { box-shadow: 0 0 30px rgba(93, 229, 152, 0.8); }
}

.what-icon-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.15);
	opacity: 0;
	transition: all 0.5s ease;
}

.what-card:hover .what-icon-pulse {
	opacity: 1;
	animation: whatIconPulse 1.2s ease-out infinite;
}

@keyframes whatIconPulse {
	0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
	100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

.what-icon {
	position: relative;
	z-index: 2;
	width: 36px;
	height: 36px;
	transition: all 0.5s ease;
	filter: drop-shadow(0 3px 8px rgba(3, 45, 32, 0.2));
}

.what-card:hover .what-icon {
	transform: scale(1.2) rotate(15deg);
	filter: drop-shadow(0 6px 18px rgba(93, 229, 152, 0.6));
	animation: whatIconBounce 0.6s ease;
}

@keyframes whatIconBounce {
	0%, 100% { transform: scale(1.2) rotate(15deg); }
	25% { transform: scale(1.35) rotate(-10deg); }
	50% { transform: scale(1.15) rotate(20deg); }
	75% { transform: scale(1.25) rotate(5deg); }
}

.what-icon-particles {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
}

.what-particle {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 1);
	opacity: 0;
}

.what-card:hover .what-particle {
	animation: whatParticleFly 0.8s ease-out forwards;
}

.what-particle.wp1 { --tx: 35px; --ty: -35px; animation-delay: 0s; }
.what-particle.wp2 { --tx: -35px; --ty: -35px; animation-delay: 0.1s; }
.what-particle.wp3 { --tx: 0px; --ty: -45px; animation-delay: 0.2s; }
.what-particle.wp4 { --tx: 35px; --ty: 15px; animation-delay: 0.3s; }

@keyframes whatParticleFly {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);
		opacity: 0;
	}
}

/* ===== Card Title & Desc ===== */
.what-card-title {
	font-size: 18px;
	font-weight: 700;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 10px;
	position: relative;
	z-index: 1;
	transition: all 0.4s ease;
}

.what-card:hover .what-card-title {
	transform: translateY(-3px);
	text-shadow: 0 6px 20px rgba(93, 229, 152, 0.3);
}

.what-card-desc {
	font-size: 14px;
	color: rgba(88, 101, 95, 0.85);
	line-height: 1.6;
	margin: 0;
	position: relative;
	z-index: 1;
	transition: color 0.4s ease;
}

.what-card:hover .what-card-desc {
	color: rgba(3, 45, 32, 0.8);
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.what-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.what-title {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	.what-is-section {
		padding: 60px 0;
	}
	.what-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.what-title {
		font-size: 28px;
	}
	.what-desc {
		font-size: 15px;
	}
	.what-card {
		padding: 30px 25px;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.what-blob,
	.what-card,
	.what-subtitle,
	.what-title,
	.what-title-underline,
	.what-icon,
	.what-icon-ring,
	.what-icon-pulse,
	.what-particle {
		animation: none !important;
	}
	.what-card:hover {
		transform: translateY(-5px) scale(1.02) !important;
	}
}

/* =============================================
   User Experience - Phone Mockup Showcase
   ============================================= */

.ux-section {
	position: relative;
	padding: 100px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f4f8f5 50%, #ffffff 100%);
}

.ux-bg-deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}

.ux-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(120px);
}

.ux-blob-1 {
	width: 380px;
	height: 380px;
	background: rgba(93, 229, 152, 0.18);
	top: -80px;
	left: -60px;
	animation: uxBlob1 14s ease-in-out infinite;
}

.ux-blob-2 {
	width: 320px;
	height: 320px;
	background: rgba(8, 115, 68, 0.12);
	bottom: -80px;
	right: -60px;
	animation: uxBlob2 16s ease-in-out infinite;
}

@keyframes uxBlob1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(40px, 60px) scale(1.08); }
}

@keyframes uxBlob2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-50px, -40px) scale(1.1); }
}

.ux-dots {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(circle, rgba(8, 115, 68, 0.06) 1px, transparent 1px);
	background-size: 30px 30px;
	animation: uxDotsShift 25s linear infinite;
}

@keyframes uxDotsShift {
	0% { background-position: 0 0; }
	100% { background-position: 30px 30px; }
}

/* ===== Header ===== */
.ux-header {
	text-align: center;
	margin-bottom: 60px;
	position: relative;
	z-index: 1;
}

.ux-title {
	font-size: 42px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 16px;
	line-height: 1.2;
	animation: uxTitleIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes uxTitleIn {
	0% { opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(10px); }
	60% { transform: translateY(-8px) scale(1.02); filter: blur(0); }
	100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.ux-title-line {
	width: 80px;
	height: 4px;
	margin: 0 auto;
	background: linear-gradient(90deg, rgba(8, 115, 68, 1), rgba(93, 229, 152, 1));
	border-radius: 2px;
	animation: uxLineIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both, uxLineGlow 3s ease-in-out 1.5s infinite;
}

@keyframes uxLineIn {
	0% { width: 0; opacity: 0; }
	100% { width: 80px; opacity: 1; }
}

@keyframes uxLineGlow {
	0%, 100% { box-shadow: 0 0 8px rgba(8, 115, 68, 0.4); }
	50% { box-shadow: 0 0 22px rgba(8, 115, 68, 0.8); }
}

/* ===== Grid ===== */
.ux-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 36px;
	position: relative;
	z-index: 1;
}

/* ===== Card ===== */
.ux-card {
	text-align: center;
	position: relative;
	animation: uxCardIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.ux-card-1 { animation-delay: 0.1s; }
.ux-card-2 { animation-delay: 0.25s; }
.ux-card-3 { animation-delay: 0.4s; }
.ux-card-4 { animation-delay: 0.55s; }

@keyframes uxCardIn {
	0% { opacity: 0; transform: translateY(50px) scale(0.9); }
	60% { transform: translateY(-10px) scale(1.02); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Phone Mockup ===== */
.ux-phone-wrap {
	position: relative;
	width: 100%;
	max-width: 220px;
	margin: 0 auto;
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.ux-card:hover .ux-phone-wrap {
	transform: translateY(-12px) scale(1.03);
}

.ux-phone-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 9/18;
	background: #ffffff;
	border-radius: 28px;
	border: 3px solid rgba(3, 45, 32, 0.12);
	overflow: hidden;
	box-shadow:
		0 20px 50px rgba(3, 45, 32, 0.12),
		0 0 0 6px rgba(8, 115, 68, 0.06);
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.ux-card:hover .ux-phone-frame {
	border-color: rgba(8, 115, 68, 0.3);
	box-shadow:
		0 30px 60px rgba(3, 45, 32, 0.18),
		0 0 0 6px rgba(8, 115, 68, 0.1),
		0 0 50px rgba(93, 229, 152, 0.15);
}

.ux-phone-notch {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 50%;
	height: 18px;
	background: rgba(3, 45, 32, 0.08);
	border-radius: 0 0 16px 16px;
	z-index: 3;
}

.ux-phone-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.ux-card:hover .ux-phone-img {
	transform: scale(1.04);
}

.ux-phone-glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background: linear-gradient(135deg, transparent 0%, rgba(93, 229, 152, 0.12) 50%, transparent 100%);*/
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.ux-card:hover .ux-phone-glow {
	opacity: 1;
	animation: uxGlowShift 2s ease-in-out infinite;
}

@keyframes uxGlowShift {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 0.9; }
}

/* ===== Number Badge ===== */
.ux-badge {
	position: absolute;
	top: -12px;
	right: -12px;
	width: 52px;
	height: 52px;
	z-index: 10;
}

.ux-badge-num {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(8, 115, 68, 1);
	color: #ffffff;
	font-size: 20px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 6px 20px rgba(8, 115, 68, 0.45),
		0 0 0 4px rgba(255, 255, 255, 0.9);
	z-index: 2;
	transition: all 0.5s ease;
	animation: uxBadgeBounce 2s ease-in-out infinite;
}

@keyframes uxBadgeBounce {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.08); }
}

.ux-badge-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid rgba(8, 115, 68, 0.25);
	transition: all 0.5s ease;
}

.ux-badge-ring-2 {
	width: 62px;
	height: 62px;
	border-style: dashed;
	border-color: rgba(93, 229, 152, 0.45);
	animation: uxRingSpin 6s linear infinite;
}

@keyframes uxRingSpin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.ux-badge-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(8, 115, 68, 0.3);
	opacity: 0;
	transition: all 0.5s ease;
}

/* Hover badge effects */
.ux-card:hover .ux-badge-num {
	transform: translate(-50%, -50%) scale(1.15);
	box-shadow:
		0 8px 30px rgba(8, 115, 68, 0.55),
		0 0 0 5px rgba(255, 255, 255, 0.95),
		0 0 30px rgba(93, 229, 152, 0.4);
	animation: none;
}

.ux-card:hover .ux-badge-ring {
	width: 60px;
	height: 60px;
	animation: uxRingPulse 1.2s ease-in-out infinite;
}

.ux-card:hover .ux-badge-pulse {
	opacity: 1;
	animation: uxBadgePulse 1.2s ease-out infinite;
}

@keyframes uxRingPulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes uxBadgePulse {
	0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
	100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* ===== Card Body ===== */
.ux-card-body {
	margin-top: 30px;
	padding: 0 10px;
	position: relative;
	z-index: 1;
}

.ux-card-title {
	font-size: 19px;
	font-weight: 700;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 8px;
	transition: all 0.4s ease;
}

.ux-card:hover .ux-card-title {
	color: rgba(8, 115, 68, 1);
	transform: translateY(-3px);
	text-shadow: 0 4px 15px rgba(8, 115, 68, 0.2);
}

.ux-card-desc {
	font-size: 14px;
	color: rgba(88, 101, 95, 0.85);
	line-height: 1.55;
	margin: 0;
	transition: color 0.4s ease;
}

.ux-card:hover .ux-card-desc {
	color: rgba(3, 45, 32, 0.8);
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.ux-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 30px;
	}
	.ux-title {
		font-size: 36px;
	}
	.ux-phone-wrap {
		max-width: 200px;
	}
}

@media (max-width: 767px) {
	.ux-section {
		padding: 60px 0;
	}
	.ux-grid {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	.ux-title {
		font-size: 28px;
	}
	.ux-phone-wrap {
		max-width: 180px;
	}
	.ux-badge {
		width: 46px;
		height: 46px;
		top: -10px;
		right: -10px;
	}
	.ux-badge-num {
		width: 38px;
		height: 38px;
		font-size: 16px;
	}
	.ux-badge-ring {
		width: 44px;
		height: 44px;
	}
	.ux-badge-ring-2 {
		width: 54px;
		height: 54px;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.ux-blob,
	.ux-dots,
	.ux-badge-num,
	.ux-badge-ring-2,
	.ux-card {
		animation: none !important;
	}
	.ux-card:hover .ux-phone-wrap {
		transform: translateY(-5px) scale(1.02) !important;
	}
}

.safety-section {
	position: relative;
	padding: 100px 0;
	overflow: hidden;
	background: linear-gradient(90deg, rgba(240, 248, 244, 1) 0%, rgba(251, 254, 252, 1) 100%);
}

.safety-bg-deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}

.safety-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(140px);
}

.safety-blob-1 {
	width: 420px;
	height: 420px;
	background: rgba(93, 229, 152, 0.2);
	top: -100px;
	right: -80px;
	animation: safetyBlob1 14s ease-in-out infinite;
}

.safety-blob-2 {
	width: 340px;
	height: 340px;
	background: rgba(11, 138, 80, 0.15);
	bottom: -60px;
	left: 10%;
	animation: safetyBlob2 16s ease-in-out infinite;
}

@keyframes safetyBlob1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-60px, 40px) scale(1.1); }
}

@keyframes safetyBlob2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(50px, -50px) scale(1.08); }
}

.safety-shimmer {
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
}

.safety-shimmer-1 {
	top: 20%;
	left: 30%;
	animation: safetyShimmer1 8s ease-in-out infinite;
}

.safety-shimmer-2 {
	bottom: 10%;
	right: 25%;
	animation: safetyShimmer2 10s ease-in-out infinite 2s;
}

@keyframes safetyShimmer1 {
	0%, 100% { opacity: 0.4; transform: translate(0, 0); }
	50% { opacity: 0.8; transform: translate(20px, 30px); }
}

@keyframes safetyShimmer2 {
	0%, 100% { opacity: 0.3; transform: translate(0, 0); }
	50% { opacity: 0.7; transform: translate(-25px, -20px); }
}

.safety-grid-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(rgba(11, 138, 80, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(11, 138, 80, 0.04) 1px, transparent 1px);
	background-size: 50px 50px;
	animation: safetyGridShift 30s linear infinite;
}

@keyframes safetyGridShift {
	0% { background-position: 0 0; }
	100% { background-position: 50px 50px; }
}

/* ===== Layout ===== */
.safety-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	align-items: center;
	position: relative;
	z-index: 1;
}

/* ===== Left Image ===== */
.safety-left {
	display: flex;
	justify-content: center;
	align-items: center;
}

.safety-img-wrap {
	position: relative;
	width: 100%;
	max-width: 440px;
	animation: safetyImgFloat 6s ease-in-out infinite;
}

@keyframes safetyImgFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-15px); }
}

.safety-img-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 85%;
	height: 85%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.3), transparent 70%);
	filter: blur(40px);
	animation: safetyGlowPulse 3s ease-in-out infinite;
}

@keyframes safetyGlowPulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
	50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.safety-img-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
	height: 95%;
	border-radius: 24px;
	border: 2px dashed rgba(11, 138, 80, 0.2);
	animation: safetyRingRotate 20s linear infinite;
}

.safety-img-ring-2 {
	width: 88%;
	height: 88%;
	border-style: solid;
	border-color: rgba(93, 229, 152, 0.3);
	border-style: dashed;
	animation: safetyRingRotate 15s linear infinite reverse;
}

@keyframes safetyRingRotate {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.safety-img-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*width: 92%;*/
	/*height: 92%;*/
	border-radius: 20px;
	border: 3px solid rgba(3, 45, 32, 0.08);
	background: #ffffff;
	box-shadow:
		0 25px 60px rgba(3, 45, 32, 0.12),
		inset 0 0 0 1px rgba(255, 255, 255, 0.8);
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.safety-img-wrap:hover .safety-img-frame {
	border-color: rgba(11, 138, 80, 0.25);
	box-shadow:
		0 35px 80px rgba(3, 45, 32, 0.18),
		inset 0 0 0 1px rgba(93, 229, 152, 0.3);
}

.safety-main-img {
	position: relative;
	width: 92%;
	margin: 0 auto;
	display: block;
	border-radius: 18px;
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	z-index: 2;
}

.safety-img-wrap:hover .safety-main-img {
	transform: scale(1.03) rotate(-0.5deg);
}

.safety-floating-particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 3;
}

.safety-particle {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.6);
	box-shadow: 0 0 12px rgba(93, 229, 152, 0.8);
	animation: safetyParticleFloat 5s ease-in-out infinite;
}

.safety-particle.sp1 { top: 10%; left: 15%; animation-delay: 0s; }
.safety-particle.sp2 { top: 25%; right: 10%; animation-delay: 1s; background: rgba(11, 138, 80, 0.7); box-shadow: 0 0 12px rgba(11, 138, 80, 0.8); }
.safety-particle.sp3 { bottom: 20%; left: 8%; animation-delay: 2s; }
.safety-particle.sp4 { bottom: 15%; right: 18%; animation-delay: 1.5s; background: rgba(11, 138, 80, 0.7); box-shadow: 0 0 12px rgba(11, 138, 80, 0.8); }
.safety-particle.sp5 { top: 60%; right: 5%; animation-delay: 3s; width: 6px; height: 6px; }

@keyframes safetyParticleFloat {
	0%, 100% { transform: translateY(0) translateX(0); opacity: 0.8; }
	25% { transform: translateY(-15px) translateX(8px); opacity: 1; }
	50% { transform: translateY(-25px) translateX(-5px); opacity: 0.6; }
	75% { transform: translateY(-10px) translateX(12px); opacity: 0.9; }
}

.safety-img-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	pointer-events: none;
	z-index: 4;
}

.safety-img-wrap:hover .safety-img-shine {
	animation: safetyShineSweep 1.2s ease-out forwards;
}

@keyframes safetyShineSweep {
	0% { left: -100%; }
	100% { left: 150%; }
}

/* ===== Right Content ===== */
.safety-right {
	padding-left: 20px;
}

.safety-header {
	margin-bottom: 40px;
	animation: safetyHeaderIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes safetyHeaderIn {
	0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
	60% { transform: translateY(-5px); filter: blur(0); }
	100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.safety-title {
	font-size: 40px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 16px;
	line-height: 1.2;
}

.safety-title-underline {
	width: 70px;
	height: 4px;
	background: rgba(11, 138, 80, 1);
	border-radius: 2px;
	position: relative;
	animation: safetyUnderlineGrow 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both, safetyUnderlineGlow 3s ease-in-out 1.5s infinite;
}

.safety-title-underline::after {
	content: '';
	position: absolute;
	right: -20px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(11, 138, 80, 1);
	animation: safetyDotPulse 2s ease-in-out 1.5s infinite;
}

@keyframes safetyUnderlineGrow {
	0% { width: 0; }
	100% { width: 70px; }
}

@keyframes safetyUnderlineGlow {
	0%, 100% { box-shadow: 0 0 6px rgba(11, 138, 80, 0.4); }
	50% { box-shadow: 0 0 20px rgba(11, 138, 80, 0.7); }
}

@keyframes safetyDotPulse {
	0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 8px rgba(11, 138, 80, 0.5); }
	50% { transform: translateY(-50%) scale(1.3); box-shadow: 0 0 16px rgba(11, 138, 80, 0.8); }
}

/* ===== Check Grid ===== */
.safety-check-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 30px;
	margin-bottom: 36px;
}

.safety-check-item {
	display: flex;
	align-items: center;
	gap: 12px;
/*	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 12px;*/
/*	border: 1px solid rgba(3, 45, 32, 0.06);*/
	position: relative;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
	animation: safetyCheckIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.safety-check-item:nth-child(1) { animation-delay: 0.2s; }
.safety-check-item:nth-child(2) { animation-delay: 0.3s; }
.safety-check-item:nth-child(3) { animation-delay: 0.4s; }
.safety-check-item:nth-child(4) { animation-delay: 0.5s; }
.safety-check-item:nth-child(5) { animation-delay: 0.6s; }
.safety-check-item:nth-child(6) { animation-delay: 0.7s; }

@keyframes safetyCheckIn {
	0% { opacity: 0; transform: translateX(-20px); }
	60% { transform: translateX(5px); }
	100% { opacity: 1; transform: translateX(0); }
}

.safety-check-item:hover {
	transform: translateX(6px) scale(1.02);
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(11, 138, 80, 0.25);
	box-shadow:
		0 8px 24px rgba(3, 45, 32, 0.1),
		0 0 0 1px rgba(11, 138, 80, 0.08);
}

.safety-check-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg, rgba(11, 138, 80, 1), rgba(93, 229, 152, 1));
	border-radius: 3px 0 0 3px;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.4s ease;
}

.safety-check-item:hover::before {
	transform: scaleY(1);
	transform-origin: top;
}

.safety-check-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	transition: all 0.4s ease;
	filter: drop-shadow(0 2px 6px rgba(11, 138, 80, 0.3));
}

.safety-check-item:hover .safety-check-icon {
	transform: scale(1.15) rotate(-8deg);
	filter: drop-shadow(0 4px 12px rgba(11, 138, 80, 0.5));
}

.safety-check-text {
	font-size: 13px;
	font-weight: 500;
	color: rgba(3, 45, 32, 0.9);
	line-height: 1.4;
	transition: color 0.4s ease;
}

.safety-check-item:hover .safety-check-text {
	color: rgba(11, 138, 80, 1);
	font-weight: 600;
}

/* ===== Info Box ===== */
.safety-info-box {
	position: relative;
	padding: 12px 56px 12px 48px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.64);
	border: 1.5px solid rgba(3, 45, 32, 0.17);
	overflow: hidden;
	backdrop-filter: blur(10px);
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	animation: safetyInfoIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.8s both;
}

@keyframes safetyInfoIn {
	0% { opacity: 0; transform: translateY(20px) scale(0.98); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.safety-info-box:hover {
	border-color: rgba(11, 138, 80, 0.35);
	background: rgba(255, 255, 255, 0.8);
	transform: translateY(-4px);
	box-shadow:
		0 20px 40px rgba(3, 45, 32, 0.12),
		0 0 0 1px rgba(11, 138, 80, 0.15);
}

.safety-info-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.1) 0%, transparent 50%, rgba(11, 138, 80, 0.08) 100%);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.safety-info-box:hover .safety-info-bg {
	opacity: 1;
}

.safety-info-border {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, rgba(11, 138, 80, 1), rgba(93, 229, 152, 1), rgba(11, 138, 80, 1));
	background-size: 200% 100%;
	animation: safetyBorderFlow 3s linear infinite;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.safety-info-box:hover .safety-info-border {
	opacity: 1;
}

@keyframes safetyBorderFlow {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

.safety-info-icon-left {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	transition: all 0.5s ease;
	filter: drop-shadow(0 3px 8px rgba(11, 138, 80, 0.35));
}

.safety-info-box:hover .safety-info-icon-left {
	transform: translateY(-50%) scale(1.1) rotate(-5deg);
	filter: drop-shadow(0 5px 14px rgba(11, 138, 80, 0.5));
}

.safety-info-text {
	position: relative;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(3, 45, 32, 0.88);
	margin: 0;
	font-weight: 500;
	margin-left: 10px;
}

.safety-info-icon-right {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	transition: all 0.5s ease;
	filter: drop-shadow(0 3px 8px rgba(11, 138, 80, 0.3));
	cursor: pointer;
}

.safety-info-box:hover .safety-info-icon-right {
	transform: translateY(-50%) translateX(5px) scale(1.15);
	filter: drop-shadow(0 5px 14px rgba(11, 138, 80, 0.5));
}

.safety-info-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	pointer-events: none;
}

.safety-info-box:hover .safety-info-shine {
	animation: safetyShineSweep 0.9s ease-out forwards;
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.safety-layout {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	.safety-left {
		order: 2;
	}
	.safety-right {
		order: 1;
		padding-left: 0;
	}
	.safety-img-wrap {
		max-width: 340px;
	}
	.safety-title {
		font-size: 34px;
	}
}

@media (max-width: 767px) {
	.safety-section {
		padding: 60px 0;
	}
	.safety-check-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.safety-title {
		font-size: 28px;
	}
	.safety-img-wrap {
		max-width: 280px;
	}
	.safety-info-box {
		padding: 20px 50px 20px 44px;
	}
	.safety-info-text {
		font-size: 13px;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.safety-blob,
	.safety-shimmer,
	.safety-particle,
	.safety-img-wrap,
	.safety-img-ring,
	.safety-grid-overlay {
		animation: none !important;
	}
	.safety-img-wrap:hover {
		transform: none !important;
	}
}

/* =============================================
   Who We Are - Super Cool Section
   ============================================= */

.who-section {
	position: relative;
	padding: 50px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f6faf8 50%, #ffffff 100%);
}

.who-bg-deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}

.who-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(130px);
}

.who-blob-1 {
	width: 400px;
	height: 400px;
	background: rgba(93, 229, 152, 0.18);
	top: -80px;
	left: -60px;
	animation: whoBlob1 13s ease-in-out infinite;
}

.who-blob-2 {
	width: 350px;
	height: 350px;
	background: rgba(8, 115, 68, 0.13);
	bottom: -60px;
	right: -40px;
	animation: whoBlob2 15s ease-in-out infinite;
}

.who-blob-3 {
	width: 280px;
	height: 280px;
	background: rgba(93, 229, 152, 0.12);
	top: 40%;
	left: 50%;
	animation: whoBlob3 17s ease-in-out infinite;
}

@keyframes whoBlob1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(50px, 60px) scale(1.08); }
}

@keyframes whoBlob2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-50px, -40px) scale(1.06); }
}

@keyframes whoBlob3 {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-30%, -60%) scale(1.1); }
}

.who-pattern {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		radial-gradient(circle, rgba(8, 115, 68, 0.05) 1px, transparent 1px);
	background-size: 28px 28px;
	animation: whoPatternShift 30s linear infinite;
}

@keyframes whoPatternShift {
	0% { background-position: 0 0; }
	100% { background-position: 28px 28px; }
}

.who-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	position: relative;
	z-index: 1;
}

.who-left {
	display: flex;
	justify-content: center;
	align-items: center;
}

.who-img-wrap {
	position: relative;
	width: 100%;
	max-width: 480px;
	animation: whoImgFloat 7s ease-in-out infinite;
}

@keyframes whoImgFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-18px) rotate(-0.5deg); }
	75% { transform: translateY(-8px) rotate(0.5deg); }
}

.who-img-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 88%;
	height: 88%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.25), transparent 70%);
	filter: blur(50px);
	animation: whoGlowPulse 4s ease-in-out infinite;
}

@keyframes whoGlowPulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
	50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

.who-img-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 28px;
}

.who-img-ring-1 {
	width: 96%;
	height: 96%;
	border: 2px dashed rgba(8, 115, 68, 0.18);
	animation: whoRingRotate 22s linear infinite;
}

.who-img-ring-2 {
	width: 90%;
	height: 90%;
	border: 2px dashed rgba(93, 229, 152, 0.3);
	animation: whoRingRotate 18s linear infinite reverse;
}

@keyframes whoRingRotate {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.who-img-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
/*	width: 94%;
	height: 94%;
	border-radius: 24px;
	border: 3px solid rgba(3, 45, 32, 0.1);
	background: #ffffff;*/
	box-shadow:
		0 30px 70px rgba(3, 45, 32, 0.14),
		inset 0 0 0 1px rgba(255, 255, 255, 0.8);
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.who-img-wrap:hover .who-img-frame {
	border-color: rgba(8, 115, 68, 0.25);
	box-shadow:
		0 40px 90px rgba(3, 45, 32, 0.2),
		inset 0 0 0 1px rgba(93, 229, 152, 0.3),
		0 0 60px rgba(93, 229, 152, 0.15);
}

.who-main-img {
	position: relative;
	width: 94%;
	margin: 0 auto;
	display: block;
	border-radius: 20px;
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	z-index: 2;
}

.who-img-wrap:hover .who-main-img {
	transform: scale(1.03) rotate(-0.8deg);
}

.who-floating-elements {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 5;
}

.who-badge {
	position: absolute;
	padding: 10px 16px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 14px;
	box-shadow:
		0 10px 30px rgba(3, 45, 32, 0.15),
		0 0 0 1px rgba(8, 115, 68, 0.12);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 2px;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.who-badge-1 {
	top: 12%;
	right: -10px;
	animation: whoBadgeFloat1 4s ease-in-out infinite;
}

.who-badge-2 {
	bottom: 15%;
	left: -15px;
	animation: whoBadgeFloat2 5s ease-in-out infinite;
}

@keyframes whoBadgeFloat1 {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes whoBadgeFloat2 {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-12px) rotate(-2deg); }
}

.who-img-wrap:hover .who-badge-1 {
	transform: translateY(-20px) scale(1.08);
	background: #ffffff;
	box-shadow:
		0 15px 40px rgba(8, 115, 68, 0.25),
		0 0 0 1px rgba(8, 115, 68, 0.2);
}

.who-img-wrap:hover .who-badge-2 {
	transform: translateY(-25px) scale(1.08);
	background: #ffffff;
	box-shadow:
		0 15px 40px rgba(8, 115, 68, 0.25),
		0 0 0 1px rgba(8, 115, 68, 0.2);
}

.who-badge-num {
	font-size: 18px;
	font-weight: 800;
	color: rgba(8, 115, 68, 1);
	line-height: 1;
}

.who-badge-label {
	font-size: 11px;
	font-weight: 600;
	color: rgba(3, 45, 32, 0.7);
	letter-spacing: 0.5px;
}

.who-img-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	pointer-events: none;
	z-index: 6;
}

.who-img-wrap:hover .who-img-shine {
	animation: whoShineSweep 1.2s ease-out forwards;
}

@keyframes whoShineSweep {
	0% { left: -100%; }
	100% { left: 150%; }
}

.who-particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 4;
}

.who-particle {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.6);
	box-shadow: 0 0 10px rgba(93, 229, 152, 0.8);
	opacity: 0;
	animation: whoParticleFloat 4s ease-in-out infinite;
}

.who-particle.wp1 { top: 8%; left: 20%; animation-delay: 0s; }
.who-particle.wp2 { top: 30%; right: 8%; animation-delay: 0.8s; width: 5px; height: 5px; }
.who-particle.wp3 { bottom: 25%; left: 5%; animation-delay: 1.6s; background: rgba(8, 115, 68, 0.6); box-shadow: 0 0 10px rgba(8, 115, 68, 0.8); }
.who-particle.wp4 { bottom: 10%; right: 20%; animation-delay: 2.4s; width: 7px; height: 7px; }
.who-particle.wp5 { top: 55%; right: 3%; animation-delay: 1.2s; background: rgba(8, 115, 68, 0.5); box-shadow: 0 0 10px rgba(8, 115, 68, 0.7); }
.who-particle.wp6 { top: 70%; left: 15%; animation-delay: 3s; width: 4px; height: 4px; }

@keyframes whoParticleFloat {
	0%, 100% { transform: translateY(0) translateX(0); opacity: 0.7; }
	50% { transform: translateY(-20px) translateX(10px); opacity: 1; }
}

.who-right {
	padding-left: 20px;
}

.who-header {
	margin-bottom: 10px;
}

.who-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(8, 115, 68, 1);
	padding: 7px 20px;
	background: rgba(8, 115, 68, 0.08);
	border-radius: 30px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
	animation: whoEybrowIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.who-eyebrow::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(93, 229, 152, 0.4), transparent);
	animation: whoShimmer 3s infinite;
}

@keyframes whoShimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}

@keyframes whoEybrowIn {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

.who-title {
	font-size: 40px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 18px;
	line-height: 1.2;
	animation: whoTitleIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.15s both;
}

@keyframes whoTitleIn {
	0% { opacity: 0; transform: translateY(30px) scale(0.96); filter: blur(8px); }
	60% { transform: translateY(-6px) scale(1.02); filter: blur(0); }
	100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.who-title-bar {
	width: 80px;
	height: 4px;
	background: linear-gradient(90deg, rgba(8, 115, 68, 1), rgba(93, 229, 152, 1));
	border-radius: 2px;
	margin-bottom: 24px;
	animation: whoBarGrow 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both, whoBarGlow 3s ease-in-out 1.8s infinite;
}

@keyframes whoBarGrow {
	0% { width: 0; }
	100% { width: 80px; }
}

@keyframes whoBarGlow {
	0%, 100% { box-shadow: 0 0 8px rgba(8, 115, 68, 0.4); }
	50% { box-shadow: 0 0 22px rgba(8, 115, 68, 0.8); }
}

.who-desc {
	font-size: 16px;
	line-height: 1.8;
	color: rgba(88, 101, 95, 0.9);
	margin-top: 20px;
	max-width: 520px;
	animation: whoDescIn 0.8s ease-out 0.5s both;
}

@keyframes whoDescIn {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

.who-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 30px;
	margin-bottom: 40px;
}

.who-feature {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 16px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 14px;
	border: 1px solid rgba(3, 45, 32, 0.08);
	position: relative;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	cursor: pointer;
	animation: whoFeatureIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.who-feature:nth-child(1) { animation-delay: 0.6s; }
.who-feature:nth-child(2) { animation-delay: 0.75s; }
.who-feature:nth-child(3) { animation-delay: 0.9s; }
.who-feature:nth-child(4) { animation-delay: 1.05s; }

@keyframes whoFeatureIn {
	0% { opacity: 0; transform: translateX(-25px); }
	60% { transform: translateX(6px); }
	100% { opacity: 1; transform: translateX(0); }
}

.who-feature::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg, rgba(8, 115, 68, 1), rgba(93, 229, 152, 1));
	border-radius: 4px 0 0 4px;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.who-feature:hover {
	transform: translateX(8px) scale(1.02);
	background: rgba(255, 255, 255, 1);
	border-color: rgba(8, 115, 68, 0.25);
	box-shadow:
		0 15px 40px rgba(3, 45, 32, 0.12),
		0 0 0 1px rgba(8, 115, 68, 0.1);
}

.who-feature:hover::before {
	transform: scaleY(1);
}

.who-feature-icon-wrap {
	position: relative;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.who-feature-icon {
	position: relative;
	z-index: 2;
	width: 34px;
	height: 34px;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	filter: drop-shadow(0 3px 8px rgba(8, 115, 68, 0.3));
}

.who-feature:hover .who-feature-icon {
	transform: scale(1.2) rotate(-8deg);
	filter: drop-shadow(0 6px 16px rgba(8, 115, 68, 0.5));
	animation: whoIconBounce 0.6s ease;
}

@keyframes whoIconBounce {
	0%, 100% { transform: scale(1.2) rotate(-8deg); }
	25% { transform: scale(1.3) rotate(5deg); }
	50% { transform: scale(1.15) rotate(-12deg); }
	75% { transform: scale(1.25) rotate(2deg); }
}

.who-feature-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border: 2px solid rgba(8, 115, 68, 0.15);
	border-radius: 50%;
	transition: all 0.5s ease;
}

.who-feature:hover .who-feature-ring {
	width: 54px;
	height: 54px;
	border-color: rgba(93, 229, 152, 0.6);
	animation: whoRingPulse 1.5s ease-in-out infinite;
}

@keyframes whoRingPulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.08); }
}

.who-feature-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.25), transparent 70%);
	opacity: 0;
	transition: all 0.5s ease;
}

.who-feature:hover .who-feature-glow {
	opacity: 1;
	animation: whoGlowPulse 1.5s ease-in-out infinite;
}

.who-feature-info {
	flex: 1;
	min-width: 0;
}

.who-feature-title {
	font-size: 16px;
	font-weight: 700;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 4px;
	transition: all 0.4s ease;
}

.who-feature:hover .who-feature-title {
	color: rgba(8, 115, 68, 1);
	transform: translateY(-2px);
}

.who-feature-desc {
	font-size: 13px;
	color: rgba(88, 101, 95, 0.8);
	line-height: 1.5;
	margin: 0;
	transition: color 0.4s ease;
}

.who-feature:hover .who-feature-desc {
	color: rgba(3, 45, 32, 0.8);
}

.who-cta {
	position: relative;
	animation: whoCtaIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) 1.2s both;
}

@keyframes whoCtaIn {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

.who-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 32px;
	background: linear-gradient(135deg, rgba(8, 115, 68, 1), rgba(11, 138, 80, 1));
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 50px;
	position: relative;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	box-shadow:
		0 10px 30px rgba(8, 115, 68, 0.35),
		0 0 0 1px rgba(8, 115, 68, 0.15);
}

.who-cta-btn:hover {
	transform: translateY(-4px) scale(1.03);
	box-shadow:
		0 18px 45px rgba(8, 115, 68, 0.45),
		0 0 0 1px rgba(8, 115, 68, 0.25),
		0 0 40px rgba(93, 229, 152, 0.3);
}

.who-cta-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.4s ease;
}

.who-cta-btn:hover .who-cta-icon {
	transform: translateX(5px);
}

.who-cta-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	pointer-events: none;
}

.who-cta-btn:hover .who-cta-shine {
	animation: whoCtaShine 0.9s ease-out forwards;
}

@keyframes whoCtaShine {
	0% { left: -100%; }
	100% { left: 150%; }
}

@media (max-width: 1199px) {
	.who-layout {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	.who-left {
		order: 2;
	}
	.who-right {
		order: 1;
		padding-left: 0;
	}
	.who-img-wrap {
		max-width: 360px;
	}
	.who-title {
		font-size: 34px;
	}
}

@media (max-width: 767px) {
	.who-section {
		padding: 70px 0;
	}
	.who-features {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.who-title {
		font-size: 28px;
	}
	.who-img-wrap {
		max-width: 300px;
	}
	.who-feature-icon-wrap {
		width: 48px;
		height: 48px;
	}
	.who-feature-icon {
		width: 28px;
		height: 28px;
	}
	.who-feature-ring {
		width: 40px;
		height: 40px;
	}
	.who-badge-1 {
		right: -5px;
		padding: 8px 12px;
	}
	.who-badge-2 {
		left: -10px;
		padding: 8px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.who-blob,
	.who-img-wrap,
	.who-img-ring,
	.who-pattern,
	.who-particle,
	.who-badge {
		animation: none !important;
	}
	.who-img-wrap:hover {
		transform: none !important;
	}
	.who-feature:hover {
		transform: translateX(4px) scale(1.01) !important;
	}
}

/* =============================================
   Our Mission - Super Cool Section
   ============================================= */

.mission-section {
	position: relative;
	padding: 50px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f4f8f5 50%, #ffffff 100%);
}

.mission-bg-deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}

.mission-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(130px);
}

.mission-blob-1 {
	width: 420px;
	height: 420px;
	background: rgba(93, 229, 152, 0.18);
	top: -100px;
	left: -80px;
	animation: missionBlob1 13s ease-in-out infinite;
}

.mission-blob-2 {
	width: 360px;
	height: 360px;
	background: rgba(8, 115, 68, 0.13);
	bottom: -80px;
	right: -60px;
	animation: missionBlob2 15s ease-in-out infinite;
}

.mission-blob-3 {
	width: 300px;
	height: 300px;
	background: rgba(93, 229, 152, 0.12);
	top: 35%;
	left: 55%;
	animation: missionBlob3 17s ease-in-out infinite;
}

@keyframes missionBlob1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(50px, 60px) scale(1.08); }
}

@keyframes missionBlob2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-50px, -40px) scale(1.06); }
}

@keyframes missionBlob3 {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-30%, -60%) scale(1.1); }
}

.mission-grid {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(rgba(8, 115, 68, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(8, 115, 68, 0.025) 1px, transparent 1px);
	background-size: 60px 60px;
	animation: missionGridShift 30s linear infinite;
}

@keyframes missionGridShift {
	0% { background-position: 0 0; }
	100% { background-position: 60px 60px; }
}

/* ===== Header ===== */
.mission-header {
	text-align: center;
	margin-bottom: 70px;
	position: relative;
	z-index: 1;
}

.mission-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(8, 115, 68, 1);
	padding: 8px 22px;
	background: rgba(8, 115, 68, 0.08);
	border-radius: 30px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
	animation: missionEyebrowIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.mission-eyebrow::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(93, 229, 152, 0.4), transparent);
	animation: missionShimmer 3s infinite;
}

@keyframes missionShimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}

@keyframes missionEyebrowIn {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

.mission-title {
	font-size: 42px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 18px;
	line-height: 1.2;
	animation: missionTitleIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.15s both;
}

@keyframes missionTitleIn {
	0% { opacity: 0; transform: translateY(30px) scale(0.96); filter: blur(8px); }
	60% { transform: translateY(-6px) scale(1.02); filter: blur(0); }
	100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.mission-title-underline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 22px;
}

.mission-underline-bar {
	width: 60px;
	height: 4px;
	background: linear-gradient(90deg, rgba(8, 115, 68, 1), rgba(93, 229, 152, 1));
	border-radius: 2px;
	animation: missionBarGrow 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both, missionBarGlow 3s ease-in-out 1.8s infinite;
}

.mission-underline-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(8, 115, 68, 1);
	animation: missionDotPulse 2s ease-in-out 1.8s infinite;
}

@keyframes missionBarGrow {
	0% { width: 0; }
	100% { width: 60px; }
}

@keyframes missionBarGlow {
	0%, 100% { box-shadow: 0 0 8px rgba(8, 115, 68, 0.4); }
	50% { box-shadow: 0 0 22px rgba(8, 115, 68, 0.8); }
}

@keyframes missionDotPulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(8, 115, 68, 0.5); }
	50% { transform: scale(1.3); box-shadow: 0 0 16px rgba(8, 115, 68, 0.8); }
}

.mission-subtitle {
	font-size: 16px;
	line-height: 1.8;
	color: rgba(88, 101, 95, 0.9);
	margin: 0;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	animation: missionDescIn 0.8s ease-out 0.5s both;
}

@keyframes missionDescIn {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ===== Cards Grid ===== */
.mission-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	position: relative;
	z-index: 1;
}

/* ===== Card ===== */
.mission-card {
	position: relative;
	background: #ffffff;
	border-radius: 20px;
	border: 2px solid rgba(3, 45, 32, 0.08);
	overflow: hidden;
	cursor: pointer;
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	animation: missionCardIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.mission-card-1 { animation-delay: 0.1s; }
.mission-card-2 { animation-delay: 0.25s; }
.mission-card-3 { animation-delay: 0.4s; }
.mission-card-4 { animation-delay: 0.55s; }

@keyframes missionCardIn {
	0% { opacity: 0; transform: translateY(50px) scale(0.9) rotateX(-5deg); }
	60% { transform: translateY(-10px) scale(1.02) rotateX(2deg); }
	100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}

.mission-card-glow {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.15), transparent 50%);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
	z-index: 0;
}

.mission-card:hover .mission-card-glow {
	opacity: 1;
	animation: missionGlowPulse 2s ease-in-out infinite;
}

@keyframes missionGlowPulse {
	0%, 100% { transform: scale(1); opacity: 0.8; }
	50% { transform: scale(1.15); opacity: 1; }
}

.mission-card-border-flow {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, rgba(93, 229, 152, 1), rgba(8, 115, 68, 1), rgba(93, 229, 152, 1), transparent);
	background-size: 200% 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.mission-card:hover .mission-card-border-flow {
	opacity: 1;
	animation: missionBorderFlow 2s linear infinite;
}

@keyframes missionBorderFlow {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.mission-card-inner {
	position: relative;
	padding: 40px 28px 35px;
	text-align: center;
	z-index: 1;
}

.mission-card:hover {
	transform: translateY(-18px) scale(1.04);
	border-color: rgba(93, 229, 152, 0.5);
	box-shadow:
		0 30px 70px rgba(3, 45, 32, 0.15),
		0 0 50px rgba(93, 229, 152, 0.18),
		inset 0 0 40px rgba(93, 229, 152, 0.05);
}

/* ===== Icon ===== */
.mission-icon-wrap {
	position: relative;
	width: 80px;
	height: 80px;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mission-icon {
	position: relative;
	z-index: 2;
	width: 44px;
	height: 44px;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	filter: drop-shadow(0 3px 10px rgba(8, 115, 68, 0.3));
}

.mission-card:hover .mission-icon {
	transform: scale(1.2) rotate(15deg);
	filter: drop-shadow(0 8px 22px rgba(93, 229, 152, 0.55));
	animation: missionIconBounce 0.6s ease;
}

@keyframes missionIconBounce {
	0%, 100% { transform: scale(1.2) rotate(15deg); }
	25% { transform: scale(1.35) rotate(-10deg); }
	50% { transform: scale(1.15) rotate(20deg); }
	75% { transform: scale(1.25) rotate(5deg); }
}

.mission-icon-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	border: 2px solid rgba(8, 115, 68, 0.12);
	border-radius: 50%;
	transition: all 0.5s ease;
}

.mission-icon-ring-2 {
	width: 60px;
	height: 60px;
	border-style: dashed;
	border-color: rgba(93, 229, 152, 0.3);
	animation: missionRingSpin 8s linear infinite;
}

@keyframes missionRingSpin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.mission-card:hover .mission-icon-ring {
	border-color: rgba(93, 229, 152, 0.7);
	width: 82px;
	height: 82px;
	animation: missionRingPulse 1.5s ease-in-out infinite;
	box-shadow: 0 0 25px rgba(93, 229, 152, 0.4);
}

@keyframes missionRingPulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.08); }
}

.mission-card:hover .mission-icon-ring-2 {
	width: 72px;
	height: 72px;
}

.mission-icon-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.15);
	opacity: 0;
	transition: all 0.5s ease;
}

.mission-card:hover .mission-icon-pulse {
	opacity: 1;
	animation: missionIconPulse 1.2s ease-out infinite;
}

@keyframes missionIconPulse {
	0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
	100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* Particles */
.mission-icon-particles {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
}

.mission-particle {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 1);
	box-shadow: 0 0 8px rgba(93, 229, 152, 0.8);
	opacity: 0;
}

.mission-card:hover .mission-particle {
	animation: missionParticleFly 0.8s ease-out infinite;
}

.mission-particle.mp1 { --tx: 35px; --ty: -35px; animation-delay: 0s; }
.mission-particle.mp2 { --tx: -35px; --ty: -35px; animation-delay: 0.1s; }
.mission-particle.mp3 { --tx: 0px; --ty: -45px; animation-delay: 0.2s; }
.mission-particle.mp4 { --tx: 35px; --ty: 15px; animation-delay: 0.3s; }

@keyframes missionParticleFly {
	0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

/* ===== Card Content ===== */
.mission-card-title {
	font-size: 18px;
	font-weight: 700;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 12px;
	position: relative;
	z-index: 1;
	transition: all 0.4s ease;
}

.mission-card:hover .mission-card-title {
	transform: translateY(-3px);
	text-shadow: 0 6px 20px rgba(93, 229, 152, 0.3);
	color: rgba(8, 115, 68, 1);
}

.mission-card-desc {
	font-size: 14px;
	color: rgba(88, 101, 95, 0.85);
	line-height: 1.6;
	margin: 0;
	position: relative;
	z-index: 1;
	transition: color 0.4s ease;
}

.mission-card:hover .mission-card-desc {
	color: rgba(3, 45, 32, 0.8);
}

.mission-card-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	pointer-events: none;
	z-index: 2;
}

.mission-card:hover .mission-card-shine {
	animation: missionShineSweep 0.8s ease-out forwards;
}

@keyframes missionShineSweep {
	0% { left: -100%; }
	100% { left: 150%; }
}

/* Corner decorations */
.mission-card-corner {
	position: absolute;
	width: 22px;
	height: 22px;
	transition: all 0.4s ease;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
}

.mission-corner-tl {
	top: 10px;
	left: 10px;
	border-top: 2px solid rgba(93, 229, 152, 0.7);
	border-left: 2px solid rgba(93, 229, 152, 0.7);
	border-radius: 8px 0 0 0;
}

.mission-corner-tr {
	top: 10px;
	right: 10px;
	border-top: 2px solid rgba(93, 229, 152, 0.7);
	border-right: 2px solid rgba(93, 229, 152, 0.7);
	border-radius: 0 8px 0 0;
}

.mission-corner-bl {
	bottom: 10px;
	left: 10px;
	border-bottom: 2px solid rgba(93, 229, 152, 0.7);
	border-left: 2px solid rgba(93, 229, 152, 0.7);
	border-radius: 0 0 0 8px;
}

.mission-corner-br {
	bottom: 10px;
	right: 10px;
	border-bottom: 2px solid rgba(93, 229, 152, 0.7);
	border-right: 2px solid rgba(93, 229, 152, 0.7);
	border-radius: 0 0 8px 0;
}

.mission-card:hover .mission-card-corner {
	opacity: 1;
}

.mission-card:hover .mission-corner-tl {
	top: 6px;
	left: 6px;
	width: 28px;
	height: 28px;
	box-shadow: 0 0 15px rgba(93, 229, 152, 0.4);
}

.mission-card:hover .mission-corner-tr {
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	box-shadow: 0 0 15px rgba(93, 229, 152, 0.4);
}

.mission-card:hover .mission-corner-bl {
	bottom: 6px;
	left: 6px;
	width: 28px;
	height: 28px;
	box-shadow: 0 0 15px rgba(93, 229, 152, 0.4);
}

.mission-card:hover .mission-corner-br {
	bottom: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	box-shadow: 0 0 15px rgba(93, 229, 152, 0.4);
}

/* ===== CTA ===== */
.mission-cta-wrap {
	text-align: center;
	margin-top: 60px;
	position: relative;
	z-index: 1;
	animation: missionCtaIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) 1.2s both;
}

@keyframes missionCtaIn {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

.mission-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 34px;
	background: linear-gradient(135deg, rgba(8, 115, 68, 1), rgba(11, 138, 80, 1));
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 50px;
	position: relative;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	box-shadow:
		0 10px 30px rgba(8, 115, 68, 0.35),
		0 0 0 1px rgba(8, 115, 68, 0.15);
}

.mission-cta-btn:hover {
	transform: translateY(-4px) scale(1.03);
	box-shadow:
		0 18px 45px rgba(8, 115, 68, 0.45),
		0 0 0 1px rgba(8, 115, 68, 0.25),
		0 0 40px rgba(93, 229, 152, 0.3);
}

.mission-cta-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.4s ease;
}

.mission-cta-btn:hover .mission-cta-icon {
	transform: translateX(5px);
}

.mission-cta-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	pointer-events: none;
}

.mission-cta-btn:hover .mission-cta-shine {
	animation: missionCtaShine 0.9s ease-out forwards;
}

@keyframes missionCtaShine {
	0% { left: -100%; }
	100% { left: 150%; }
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.mission-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.mission-title {
		font-size: 36px;
	}
	.mission-section {
		padding: 90px 0;
	}
}

@media (max-width: 767px) {
	.mission-section {
		padding: 60px 0;
	}
	.mission-cards {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.mission-title {
		font-size: 28px;
	}
	.mission-header {
		margin-bottom: 50px;
	}
	.mission-card-inner {
		padding: 32px 24px 28px;
	}
	.mission-icon-wrap {
		width: 68px;
		height: 68px;
	}
	.mission-icon {
		width: 36px;
		height: 36px;
	}
	.mission-icon-ring {
		width: 58px;
		height: 58px;
	}
	.mission-icon-ring-2 {
		width: 52px;
		height: 52px;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.mission-blob,
	.mission-grid,
	.mission-card,
	.mission-icon-ring-2,
	.mission-eyebrow::before {
		animation: none !important;
	}
	.mission-card:hover {
		transform: translateY(-5px) scale(1.02) !important;
	}
}

/* ===== Our Strengths Section ===== */
.strengths-section {
	position: relative;
	padding: 50px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f0f8f4 40%, #ffffff 100%);
}

.strengths-bg-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.strengths-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.55;
}

.strengths-blob-1 {
	width: 500px;
	height: 500px;
	top: -120px;
	left: -100px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.5), transparent 70%);
	animation: strengthsBlob1 14s ease-in-out infinite;
}

@keyframes strengthsBlob1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(50px, 80px) scale(1.15); }
	66% { transform: translate(-40px, 40px) scale(0.9); }
}

.strengths-blob-2 {
	width: 420px;
	height: 420px;
	bottom: -80px;
	right: -60px;
	background: radial-gradient(circle, rgba(8, 115, 68, 0.35), transparent 70%);
	animation: strengthsBlob2 17s ease-in-out infinite;
}

@keyframes strengthsBlob2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-60px, -40px) scale(1.2); }
}

.strengths-blob-3 {
	width: 350px;
	height: 350px;
	top: 40%;
	left: 50%;
	background: radial-gradient(circle, rgba(148, 235, 180, 0.45), transparent 70%);
	animation: strengthsBlob3 20s ease-in-out infinite;
}

@keyframes strengthsBlob3 {
	0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.3); }
}

.strengths-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(3, 45, 32, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(3, 45, 32, 0.035) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
	animation: strengthsGridShift 25s linear infinite;
}

@keyframes strengthsGridShift {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 42px 42px, 42px 42px; }
}

/* ===== Header ===== */
.strengths-header {
	text-align: center;
	margin-bottom: 70px;
	position: relative;
	z-index: 1;
}

.strengths-eyebrow {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	color: rgba(8, 115, 68, 1);
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 7px 22px;
	background: rgba(8, 115, 68, 0.08);
	border-radius: 30px;
	position: relative;
	animation: strengthsEyebrowPulse 3s ease-in-out infinite;
}

@keyframes strengthsEyebrowPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(8, 115, 68, 0.3); }
	50% { box-shadow: 0 0 0 10px rgba(8, 115, 68, 0); }
}

.strengths-title {
	font-size: 46px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
	margin: 22px 0 18px;
	line-height: 1.25;
	letter-spacing: -0.5px;
	position: relative;
	display: inline-block;
}

.strengths-title::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 4px;
	background: linear-gradient(90deg, rgba(93, 229, 152, 0.8), rgba(8, 115, 68, 0.8));
	border-radius: 4px;
	animation: strengthsTitleBar 3s ease-in-out infinite;
}

@keyframes strengthsTitleBar {
	0%, 100% { width: 120px; opacity: 1; }
	50% { width: 180px; opacity: 0.7; }
}

.strengths-title-bar {
	width: 70px;
	height: 5px;
	background: linear-gradient(90deg, rgba(93, 229, 152, 1), rgba(8, 115, 68, 1));
	border-radius: 4px;
	margin: 0 auto;
	animation: strengthsBarPulse 2.5s ease-in-out infinite;
}

@keyframes strengthsBarPulse {
	0%, 100% { transform: scaleX(1); opacity: 1; }
	50% { transform: scaleX(1.4); opacity: 0.8; }
}

/* ===== Track Layout ===== */
.strengths-track {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
}

.strengths-line-top,
.strengths-line-bottom {
	position: absolute;
	left: 5%;
	right: 5%;
	height: 2px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(8, 115, 68, 0.25) 10%,
		rgba(93, 229, 152, 0.35) 50%,
		rgba(8, 115, 68, 0.25) 90%,
		transparent 100%);
	border-radius: 2px;
	pointer-events: none;
	animation: strengthsLineFlow 4s linear infinite;
}

.strengths-line-top {
	top: 30px;
	animation-delay: 0s;
}

.strengths-line-bottom {
	bottom: 30px;
	animation-delay: 2s;
}

@keyframes strengthsLineFlow {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

/* ===== Card Base ===== */
.strengths-card {
	position: relative;
	background: #ffffff;
	border-radius: 22px;
	border: 2px solid rgba(3, 45, 32, 0.08);
	padding: 55px 28px 38px;
	text-align: center;
	overflow: hidden;
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	animation: strengthsCardIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.strengths-card-1 { animation-delay: 0s; }
.strengths-card-2 { animation-delay: 0.12s; }
.strengths-card-3 { animation-delay: 0.24s; }
.strengths-card-4 { animation-delay: 0.36s; }
.strengths-card-5 { animation-delay: 0.48s; }

@keyframes strengthsCardIn {
	0% { opacity: 0; transform: translateY(60px) scale(0.9) rotateX(-8deg); }
	60% { transform: translateY(-12px) scale(1.03) rotateX(3deg); }
	100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}

.strengths-card-glow {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle at 30% 30%, rgba(93, 229, 152, 0.18), transparent 50%);
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
	transform: rotate(0deg);
}

.strengths-card:hover .strengths-card-glow {
	opacity: 1;
	animation: strengthsGlowSpin 4s linear infinite;
}

@keyframes strengthsGlowSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ===== Icon ===== */
.strengths-icon-wrap {
	position: relative;
	width: 90px;
	height: 90px;
	margin: 0 auto 26px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.strengths-icon {
	width: 52px;
	height: 52px;
	position: relative;
	z-index: 1;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	filter: drop-shadow(0 4px 10px rgba(8, 115, 68, 0.2));
}

.strengths-icon-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(8, 115, 68, 0.2);
	transition: all 0.5s ease;
	animation: strengthsRingPulse 3s ease-in-out infinite;
}

.strengths-icon-ring-2 {
	border-color: rgba(93, 229, 152, 0.35);
	border-style: dashed;
	animation: strengthsRingPulse 3s ease-in-out infinite 0.5s, strengthsRingSpin 10s linear infinite;
}

@keyframes strengthsRingPulse {
	0%, 100% { transform: scale(1); opacity: 0.7; }
	50% { transform: scale(1.08); opacity: 1; }
}

@keyframes strengthsRingSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ===== Card Content ===== */
.strengths-card-title {
	font-size: 20px;
	font-weight: 700;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 12px;
	transition: all 0.4s ease;
	line-height: 1.35;
}

.strengths-card-desc {
	font-size: 14px;
	color: rgba(88, 101, 95, 0.85);
	line-height: 1.65;
	margin: 0;
	transition: color 0.4s ease;
}

/* ===== Shine ===== */
.strengths-card-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	transform: skewX(-20deg);
	transition: left 0.8s ease;
	pointer-events: none;
}

.strengths-card:hover .strengths-card-shine {
	left: 150%;
}

/* ===== Card Hover ===== */
.strengths-card:hover {
	transform: translateY(-16px) scale(1.04);
	border-color: rgba(93, 229, 152, 0.5);
	box-shadow:
		0 30px 60px rgba(3, 45, 32, 0.12),
		0 0 0 3px rgba(93, 229, 152, 0.15),
		0 0 60px rgba(93, 229, 152, 0.15);
}

.strengths-card:hover .strengths-icon {
	transform: scale(1.2) rotate(-8deg);
	filter: drop-shadow(0 8px 20px rgba(8, 115, 68, 0.4));
}

.strengths-card:hover .strengths-icon-ring {
	border-color: rgba(93, 229, 152, 0.6);
	transform: scale(1.12);
}

.strengths-card:hover .strengths-icon-ring-2 {
	animation-duration: 1.5s;
}

.strengths-card:hover .strengths-card-title {
	color: rgba(8, 115, 68, 1);
	transform: translateY(-3px);
	text-shadow: 0 4px 16px rgba(8, 115, 68, 0.2);
}

.strengths-card:hover .strengths-card-desc {
	color: rgba(3, 45, 32, 0.8);
}

/* ===== CTA Button ===== */
.strengths-cta-wrap {
	text-align: center;
	margin-top: 65px;
	position: relative;
	z-index: 1;
	animation: strengthsCtaIn 0.8s ease-out 0.7s both;
}

@keyframes strengthsCtaIn {
	0% { opacity: 0; transform: translateY(30px); }
	100% { opacity: 1; transform: translateY(0); }
}

.strengths-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 20px 46px;
	background: linear-gradient(135deg, rgba(8, 115, 68, 1) 0%, rgba(93, 229, 152, 1) 100%);
	color: #ffffff;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 55px;
	position: relative;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow:
		0 10px 35px rgba(8, 115, 68, 0.3),
		0 0 0 3px rgba(8, 115, 68, 0.1);
}

.strengths-cta-btn:hover {
	transform: translateY(-5px) scale(1.04);
	box-shadow:
		0 20px 50px rgba(8, 115, 68, 0.4),
		0 0 0 3px rgba(8, 115, 68, 0.15),
		0 0 70px rgba(93, 229, 152, 0.35);
}

.strengths-cta-icon {
	width: 20px;
	height: 20px;
	transition: transform 0.4s ease;
}

.strengths-cta-btn:hover .strengths-cta-icon {
	transform: translateX(6px) rotate(-10deg);
}

.strengths-cta-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transition: left 0.8s ease;
}

.strengths-cta-btn:hover .strengths-cta-shine {
	left: 150%;
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.strengths-track {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
	.strengths-line-top,
	.strengths-line-bottom {
		display: none;
	}
	.strengths-title {
		font-size: 38px;
	}
}

@media (max-width: 767px) {
	.strengths-section {
		padding: 70px 0;
	}
	.strengths-track {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.strengths-title {
		font-size: 30px;
	}
	.strengths-header {
		margin-bottom: 45px;
	}
	.strengths-card {
		padding: 45px 22px 30px;
	}
	.strengths-icon-wrap {
		width: 75px;
		height: 75px;
	}
	.strengths-icon {
		width: 42px;
		height: 42px;
	}
	.strengths-cta-btn {
		padding: 16px 36px;
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.strengths-track {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.strengths-title {
		font-size: 26px;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.strengths-blob,
	.strengths-grid,
	.strengths-card,
	.strengths-icon-ring,
	.strengths-icon-ring-2,
	.strengths-eyebrow,
	.strengths-title::after,
	.strengths-title-bar,
	.strengths-line-top,
	.strengths-line-bottom {
		animation: none !important;
	}
	.strengths-card:hover {
		transform: none !important;
	}
}

/* ===== Compliance Statement Section ===== */
.compliance-section {
	position: relative;
	padding: 50px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f6f9f8 40%, #ffffff 100%);
}

.compliance-bg-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.compliance-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.5;
}

.compliance-blob-1 {
	width: 550px;
	height: 550px;
	top: -150px;
	right: -100px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.4), transparent 70%);
	animation: complianceBlob1 16s ease-in-out infinite;
}

@keyframes complianceBlob1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-80px, 60px) scale(1.2); }
}

.compliance-blob-2 {
	width: 400px;
	height: 400px;
	bottom: -120px;
	left: -80px;
	background: radial-gradient(circle, rgba(8, 115, 68, 0.3), transparent 70%);
	animation: complianceBlob2 18s ease-in-out infinite;
}

@keyframes complianceBlob2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(60px, -50px) scale(1.15); }
}

.compliance-blob-3 {
	width: 320px;
	height: 320px;
	top: 45%;
	right: 30%;
	background: radial-gradient(circle, rgba(148, 235, 180, 0.4), transparent 70%);
	animation: complianceBlob3 22s ease-in-out infinite;
}

@keyframes complianceBlob3 {
	0%, 100% { transform: scale(1) rotate(0deg); }
	50% { transform: scale(1.3) rotate(180deg); }
}

.compliance-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(3, 45, 32, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(3, 45, 32, 0.03) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at center, black 25%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 70%);
	animation: complianceGridShift 30s linear infinite;
}

@keyframes complianceGridShift {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 48px 48px, 48px 48px; }
}

/* ===== Card Container ===== */
.compliance-card {
	position: relative;
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 70px;
	background: rgba(246, 249, 248, 1);
	border: 2px solid rgba(220, 231, 227, 1);
	border-radius: 28px;
	padding: 60px;
	overflow: hidden;
	animation: complianceCardIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) both;
	box-shadow:
		0 20px 60px rgba(3, 45, 32, 0.06),
		0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

@keyframes complianceCardIn {
	0% { opacity: 0; transform: translateY(50px) scale(0.97); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.compliance-card-border-flow {
	position: absolute;
	inset: -2px;
	border-radius: 30px;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		rgba(93, 229, 152, 0.4) 20%,
		rgba(8, 115, 68, 0.3) 40%,
		transparent 60%,
		transparent 100%
	);
	animation: complianceBorderFlow 6s linear infinite;
	z-index: -1;
}

@keyframes complianceBorderFlow {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.compliance-card-glow {
	position: absolute;
	top: -30%;
	right: -20%;
	width: 60%;
	height: 160%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.12), transparent 60%);
	pointer-events: none;
	animation: complianceGlowPulse 5s ease-in-out infinite;
}

@keyframes complianceGlowPulse {
	0%, 100% { opacity: 0.6; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.1); }
}

/* ===== Left: Image ===== */
.compliance-left {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.compliance-image-wrap {
	position: relative;
	width: 340px;
	height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.compliance-image {
	width: 240px;
	height: 240px;
	position: relative;
	z-index: 3;
	filter: drop-shadow(0 12px 30px rgba(8, 115, 68, 0.25));
	animation: complianceImageFloat 5s ease-in-out infinite;
}

@keyframes complianceImageFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-12px) rotate(-2deg); }
	75% { transform: translateY(8px) rotate(2deg); }
}

.compliance-image-ring {
	position: absolute;
	inset: 30px;
	border-radius: 50%;
	border: 2px dashed rgba(8, 115, 68, 0.25);
	animation: complianceRingSpin 12s linear infinite, complianceRingPulse 4s ease-in-out infinite;
}

.compliance-image-ring-2 {
	inset: 10px;
	border: 2px solid rgba(93, 229, 152, 0.2);
	border-style: solid;
	animation: complianceRingSpin 18s linear infinite reverse, complianceRingPulse 4s ease-in-out infinite 1s;
}

@keyframes complianceRingSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes complianceRingPulse {
	0%, 100% { transform: scale(1); opacity: 0.7; }
	50% { transform: scale(1.05); opacity: 1; }
}

.compliance-image-glow {
	position: absolute;
	inset: 50px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.2), transparent 65%);
	animation: complianceGlowSpin 6s linear infinite;
}

@keyframes complianceGlowSpin {
	0% { transform: rotate(0deg); opacity: 0.5; }
	50% { opacity: 0.8; }
	100% { transform: rotate(360deg); opacity: 0.5; }
}

/* Particles */
.compliance-image-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.compliance-particle {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.7);
	animation: complianceParticleFloat 4s ease-in-out infinite;
}

.compliance-particle.cp1 { top: 10%; left: 30%; animation-delay: 0s; background: rgba(93, 229, 152, 0.8); }
.compliance-particle.cp2 { top: 25%; right: 10%; animation-delay: 0.7s; background: rgba(8, 115, 68, 0.7); }
.compliance-particle.cp3 { bottom: 15%; left: 15%; animation-delay: 1.4s; background: rgba(93, 229, 152, 0.6); }
.compliance-particle.cp4 { bottom: 25%; right: 20%; animation-delay: 2.1s; background: rgba(148, 235, 180, 0.8); }
.compliance-particle.cp5 { top: 50%; left: 5%; animation-delay: 2.8s; background: rgba(8, 115, 68, 0.5); width: 6px; height: 6px; }
.compliance-particle.cp6 { top: 60%; right: 5%; animation-delay: 3.5s; background: rgba(93, 229, 152, 0.5); width: 6px; height: 6px; }

@keyframes complianceParticleFloat {
	0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
	50% { transform: translateY(-20px) scale(1.3); opacity: 1; }
}

/* ===== Right: Content ===== */
.compliance-right {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

.compliance-header {
	margin-bottom: 22px;
}

.compliance-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: rgba(8, 115, 68, 1);
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 6px 18px;
	background: rgba(8, 115, 68, 0.08);
	border-radius: 25px;
	margin-bottom: 14px;
	animation: complianceEyebrowPulse 3s ease-in-out infinite;
}

@keyframes complianceEyebrowPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(8, 115, 68, 0.3); }
	50% { box-shadow: 0 0 0 8px rgba(8, 115, 68, 0); }
}

.compliance-title {
	font-size: 36px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 8px;
	line-height: 1.25;
	letter-spacing: -0.3px;
}

.compliance-title-underline {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}

.compliance-underline-bar {
	width: 60px;
	height: 4px;
	background: linear-gradient(90deg, rgba(93, 229, 152, 1), rgba(8, 115, 68, 1));
	border-radius: 3px;
	animation: complianceBarPulse 2.5s ease-in-out infinite;
}

@keyframes complianceBarPulse {
	0%, 100% { transform: scaleX(1); }
	50% { transform: scaleX(1.5); }
}

.compliance-underline-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 1);
	animation: complianceDotPulse 2.5s ease-in-out infinite 0.3s;
}

@keyframes complianceDotPulse {
	0%, 100% { transform: scale(1); opacity: 0.8; }
	50% { transform: scale(1.5); opacity: 1; }
}

.compliance-desc {
	font-size: 15px;
	color: rgba(55, 75, 68, 0.9);
	line-height: 1.75;
	margin: 0 0 28px;
}

/* ===== List ===== */
.compliance-list {
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 36px;
}

.compliance-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.7);
	border: 1.5px solid rgba(220, 231, 227, 1);
	border-radius: 14px;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: complianceItemIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.compliance-item-1 { animation-delay: 0.1s; }
.compliance-item-2 { animation-delay: 0.2s; }
.compliance-item-3 { animation-delay: 0.3s; }
.compliance-item-4 { animation-delay: 0.4s; }
.compliance-item-5 { animation-delay: 0.5s; }
.compliance-item-6 { animation-delay: 0.6s; }

@keyframes complianceItemIn {
	0% { opacity: 0; transform: translateX(-30px); }
	100% { opacity: 1; transform: translateX(0); }
}

.compliance-check {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.2), rgba(8, 115, 68, 0.15));
	color: rgba(8, 115, 68, 1);
	position: relative;
	overflow: hidden;
	transition: all 0.4s ease;
}

.compliance-check svg {
	width: 18px;
	height: 18px;
	transition: all 0.4s ease;
}

.compliance-check-default {
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.15), rgba(8, 115, 68, 0.1));
}

.compliance-check-icon {
	width: 22px;
	height: 22px;
	transition: all 0.4s ease;
	filter: drop-shadow(0 2px 4px rgba(8, 115, 68, 0.3));
}

.compliance-item-text {
	font-size: 14px;
	color: rgba(3, 45, 32, 0.85);
	line-height: 1.55;
	padding-top: 6px;
	transition: color 0.4s ease;
}

.compliance-item-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	transform: skewX(-15deg);
	transition: left 0.8s ease;
	pointer-events: none;
}

.compliance-item:hover {
	transform: translateX(6px) scale(1.02);
	border-color: rgba(93, 229, 152, 0.6);
	background: rgba(255, 255, 255, 0.95);
	box-shadow:
		0 10px 30px rgba(8, 115, 68, 0.1),
		0 0 0 2px rgba(93, 229, 152, 0.2);
}

.compliance-item:hover .compliance-check {
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.9), rgba(8, 115, 68, 0.85));
	color: #ffffff;
	transform: scale(1.08);
	box-shadow: 0 6px 20px rgba(8, 115, 68, 0.35);
}

.compliance-item:hover .compliance-check svg {
	stroke-dasharray: 30;
	stroke-dashoffset: 30;
	animation: complianceCheckDraw 0.5s ease forwards;
}

@keyframes complianceCheckDraw {
	0% { stroke-dashoffset: 30; }
	100% { stroke-dashoffset: 0; }
}

.compliance-item:hover .compliance-check-icon {
	transform: scale(1.2) rotate(-5deg);
	filter: drop-shadow(0 4px 10px rgba(8, 115, 68, 0.5));
}

.compliance-item:hover .compliance-item-text {
	color: rgba(3, 45, 32, 1);
}

.compliance-item:hover .compliance-item-shine {
	left: 150%;
}

/* ===== Footer / Support Link ===== */
.compliance-footer {
	margin-top: auto;
}

.compliance-support-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	background: linear-gradient(135deg, rgba(8, 115, 68, 1), rgba(93, 229, 152, 1));
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 45px;
	position: relative;
	overflow: hidden;
	transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow:
		0 8px 25px rgba(8, 115, 68, 0.28),
		0 0 0 3px rgba(8, 115, 68, 0.08);
}

.compliance-support-link:hover {
	transform: translateY(-4px) scale(1.03);
	box-shadow:
		0 15px 40px rgba(8, 115, 68, 0.4),
		0 0 0 3px rgba(8, 115, 68, 0.12),
		0 0 60px rgba(93, 229, 152, 0.3);
}

.compliance-support-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.4s ease;
}

.compliance-support-arrow {
	width: 18px;
	height: 18px;
	transition: transform 0.4s ease;
}

.compliance-support-link:hover .compliance-support-arrow {
	transform: translateX(5px);
}

.compliance-support-link:hover .compliance-support-icon {
	transform: scale(1.15);
}

.compliance-support-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transition: left 0.8s ease;
}

.compliance-support-link:hover .compliance-support-shine {
	left: 150%;
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.compliance-card {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 50px 40px;
	}
	.compliance-left {
		order: -1;
	}
	.compliance-image-wrap {
		width: 280px;
		height: 280px;
	}
	.compliance-image {
		width: 200px;
		height: 200px;
	}
	.compliance-title {
		font-size: 30px;
	}
}

@media (max-width: 767px) {
	.compliance-section {
		padding: 70px 0;
	}
	.compliance-card {
		padding: 35px 25px;
		border-radius: 22px;
		gap: 30px;
	}
	.compliance-image-wrap {
		width: 220px;
		height: 220px;
	}
	.compliance-image {
		width: 160px;
		height: 160px;
	}
	.compliance-title {
		font-size: 26px;
	}
	.compliance-list {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.compliance-item {
		padding: 12px 14px;
	}
	.compliance-item-text {
		font-size: 13px;
	}
	.compliance-desc {
		font-size: 14px;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.compliance-blob,
	.compliance-grid,
	.compliance-image,
	.compliance-image-ring,
	.compliance-image-glow,
	.compliance-particle,
	.compliance-eyebrow,
	.compliance-underline-bar,
	.compliance-underline-dot,
	.compliance-card-border-flow,
	.compliance-card-glow,
	.compliance-item {
		animation: none !important;
	}
	.compliance-item:hover {
		transform: none !important;
	}
}

/* ===== Main Footer ===== */
.main-footer {
	position: relative;
	padding: 80px 0 0;
	overflow: hidden;
	background: transparent;
}

.footer-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.footer-bg-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	animation: footerBgFloat 20s ease-in-out infinite;
}

@keyframes footerBgFloat {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-8px) scale(1.01); }
}

.footer-bg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(12, 42, 30, 0) 0%,
		rgba(12, 42, 30, 0) 8%,
		rgba(8, 35, 25, 0.4) 25%,
		rgba(6, 25, 18, 0.85) 60%,
		rgba(6, 25, 18, 0.92) 100%
	);
}

/* Particles */
.footer-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.footer-particle {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.6);
	animation: footerParticleFloat 6s ease-in-out infinite;
}

.footer-particle.fp1 { top: 15%; left: 10%; animation-delay: 0s; }
.footer-particle.fp2 { top: 25%; left: 80%; animation-delay: 0.8s; background: rgba(148, 235, 180, 0.5); width: 3px; height: 3px; }
.footer-particle.fp3 { top: 50%; left: 5%; animation-delay: 1.6s; background: rgba(93, 229, 152, 0.4); }
.footer-particle.fp4 { top: 60%; left: 90%; animation-delay: 2.4s; background: rgba(200, 240, 210, 0.5); width: 3px; height: 3px; }
.footer-particle.fp5 { top: 75%; left: 30%; animation-delay: 3.2s; }
.footer-particle.fp6 { top: 80%; left: 70%; animation-delay: 4s; background: rgba(148, 235, 180, 0.6); width: 5px; height: 5px; }
.footer-particle.fp7 { top: 40%; left: 50%; animation-delay: 4.8s; background: rgba(93, 229, 152, 0.3); width: 3px; height: 3px; }
.footer-particle.fp8 { top: 90%; left: 15%; animation-delay: 5.5s; }

@keyframes footerParticleFloat {
	0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.4; }
	25% { transform: translateY(-30px) translateX(10px) scale(1.3); opacity: 0.8; }
	50% { transform: translateY(-50px) translateX(-5px) scale(1); opacity: 0.5; }
	75% { transform: translateY(-20px) translateX(5px) scale(1.2); opacity: 0.7; }
}

/* ===== Footer Main Layout ===== */
.footer-main {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.7fr 1fr 1.3fr;
	gap: 60px;
	padding-bottom: 60px;
	padding-top:70px;
}

/* ===== Brand Column ===== */
.footer-col-brand {
	animation: footerFadeUp 0.8s ease-out 0.1s both;
}

@keyframes footerFadeUp {
	0% { opacity: 0; transform: translateY(30px); }
	100% { opacity: 1; transform: translateY(0); }
}

.footer-logo-wrap {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.footer-logo {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	filter: drop-shadow(0 6px 18px rgba(93, 229, 152, 0.35));
	animation: footerLogoFloat 4s ease-in-out infinite;
}

@keyframes footerLogoFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-6px) rotate(2deg); }
}

.footer-brand-name {
	font-size: 24px;
	font-weight: 800;
	color: #ffffff;
	margin: 0;
	letter-spacing: -0.3px;
	text-shadow: 0 2px 10px rgba(93, 229, 152, 0.25);
}

.footer-desc {
	font-size: 14px;
	color: rgba(220, 240, 230, 0.75);
	line-height: 1.75;
	margin: 0 0 28px;
	max-width: 340px;
}

/* Social Icons */
.footer-social {
	display: flex;
	gap: 14px;
}

.footer-social-link {
	position: relative;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(93, 229, 152, 0.2);
	color: rgba(220, 240, 230, 0.85);
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	overflow: hidden;
}

.footer-social-link svg {
	width: 18px;
	height: 18px;
	position: relative;
	z-index: 1;
	transition: all 0.4s ease;
}

.footer-social-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(93, 229, 152, 0.3), transparent);
	transform: skewX(-20deg);
	transition: left 0.6s ease;
}

.footer-social-link:hover {
	transform: translateY(-5px) scale(1.1);
	background: rgba(93, 229, 152, 0.2);
	border-color: rgba(93, 229, 152, 0.5);
	color: #ffffff;
	box-shadow:
		0 10px 25px rgba(93, 229, 152, 0.35),
		0 0 0 3px rgba(93, 229, 152, 0.1);
}

.footer-social-link:hover svg {
	transform: scale(1.2) rotate(-5deg);
	filter: drop-shadow(0 2px 8px rgba(93, 229, 152, 0.6));
}

.footer-social-link:hover .footer-social-shine {
	left: 150%;
}

/* ===== Column Titles ===== */
.footer-col {
	animation: footerFadeUp 0.8s ease-out both;
}

.footer-col-links { animation-delay: 0.2s; }
.footer-col-support { animation-delay: 0.3s; }
.footer-col-contact { animation-delay: 0.4s; }

.footer-col-title {
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 24px;
	position: relative;
	padding-bottom: 12px;
}

.footer-col-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 36px;
	height: 3px;
	background: linear-gradient(90deg, rgba(93, 229, 152, 1), rgba(148, 235, 180, 0.5));
	border-radius: 3px;
	animation: footerTitleBar 3s ease-in-out infinite;
}

@keyframes footerTitleBar {
	0%, 100% { width: 36px; opacity: 1; }
	50% { width: 50px; opacity: 0.7; }
}

/* ===== Link Lists ===== */
.footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.footer-link {
	font-size: 14px;
	color: rgba(220, 240, 230, 0.75);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: all 0.35s ease;
	position: relative;
	padding-left: 16px;
}

.footer-link::before {
	content: '';
	position: absolute;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.5);
	transition: all 0.35s ease;
}

.footer-link:hover {
	color: rgba(148, 235, 180, 1);
	transform: translateX(6px);
	text-shadow: 0 0 10px rgba(93, 229, 152, 0.4);
}

.footer-link:hover::before {
	background: rgba(93, 229, 152, 1);
	transform: scale(1.5);
	box-shadow: 0 0 10px rgba(93, 229, 152, 0.6);
}

/* ===== Contact List ===== */
.footer-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	transition: all 0.4s ease;
}

.footer-contact-item:hover {
	transform: translateX(4px);
}

.footer-contact-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 10px;
	background: rgba(93, 229, 152, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	/*border: 1px solid rgba(93, 229, 152, 0.25);*/
	transition: all 0.4s ease;
	overflow: hidden;
	position: relative;
}

.footer-contact-icon::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transform: skewX(-20deg);
	transition: left 0.6s ease;
}

.footer-contact-item:hover .footer-contact-icon {
	background: rgba(93, 229, 152, 0.3);
	border-color: rgba(93, 229, 152, 0.6);
	transform: scale(1.08);
	box-shadow: 0 6px 20px rgba(93, 229, 152, 0.35);
}

.footer-contact-item:hover .footer-contact-icon::after {
	left: 150%;
}

.footer-contact-img {
	width: 20px;
	height: 20px;
	transition: all 0.4s ease;
	filter: drop-shadow(0 2px 4px rgba(93, 229, 152, 0.3));
}

.footer-contact-item:hover .footer-contact-img {
	transform: scale(1.15);
	filter: drop-shadow(0 4px 10px rgba(93, 229, 152, 0.5));
}

.footer-contact-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.footer-contact-value {
	font-size: 13px;
	color: rgba(220, 240, 230, 0.8);
	line-height: 1.5;
	transition: color 0.35s ease;
}

.footer-contact-item:hover .footer-contact-value {
	color: #ffffff;
	text-shadow: 0 0 8px rgba(93, 229, 152, 0.3);
}

/* ===== Footer Bottom ===== */
.footer-bottom {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(93, 229, 152, 0.15);
	padding: 24px 0;
	background: rgba(6, 25, 18, 0.5);
	backdrop-filter: blur(10px);
}

.footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-copyright {
	font-size: 13px;
	color: rgba(200, 230, 215, 0.7);
	margin: 0;
	letter-spacing: 0.5px;
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.footer-main {
		grid-template-columns: 1fr 1fr;
		gap: 50px 40px;
	}
	.footer-desc {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.main-footer {
		padding: 60px 0 0;
	}
	.footer-main {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-bottom: 40px;
	}
	.footer-brand-name {
		font-size: 20px;
	}
	.footer-logo {
		width: 44px;
		height: 44px;
	}
	.footer-col-title {
		font-size: 16px;
		margin-bottom: 18px;
	}
	.footer-list {
		gap: 12px;
	}
	.footer-desc {
		font-size: 13px;
	}
	.footer-copyright {
		font-size: 12px;
		text-align: center;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.footer-bg-img,
	.footer-particle,
	.footer-logo,
	.footer-col {
		animation: none !important;
	}
	.footer-social-link:hover,
	.footer-contact-item:hover {
		transform: none !important;
	}
}

/* ===== Privacy Policy Content ===== */
.privacy-content-section {
	position: relative;
	padding: 50px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f4f8f5 50%, #ffffff 100%);
}

.privacy-bg-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.privacy-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.5;
}

.privacy-blob-1 {
	width: 550px;
	height: 550px;
	top: -150px;
	left: -100px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.45), transparent 70%);
	animation: privacyBlob1 16s ease-in-out infinite;
}

@keyframes privacyBlob1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(60px, 80px) scale(1.15); }
}

.privacy-blob-2 {
	width: 450px;
	height: 450px;
	bottom: -100px;
	right: -80px;
	background: radial-gradient(circle, rgba(8, 115, 68, 0.3), transparent 70%);
	animation: privacyBlob2 18s ease-in-out infinite;
}

@keyframes privacyBlob2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-70px, -50px) scale(1.2); }
}

.privacy-blob-3 {
	width: 350px;
	height: 350px;
	top: 50%;
	left: 50%;
	background: radial-gradient(circle, rgba(148, 235, 180, 0.4), transparent 70%);
	animation: privacyBlob3 22s ease-in-out infinite;
}

@keyframes privacyBlob3 {
	0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
	50% { transform: translate(-50%, -50%) scale(1.3) rotate(180deg); }
}

.privacy-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(3, 45, 32, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(3, 45, 32, 0.03) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at center, black 25%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 70%);
	animation: privacyGridShift 30s linear infinite;
}

@keyframes privacyGridShift {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 48px 48px, 48px 48px; }
}

/* ===== Intro Card ===== */
.privacy-intro-card {
	position: relative;
	background: #ffffff;
	border-radius: 28px;
	border: 2px solid rgba(3, 45, 32, 0.08);
	padding: 60px;
	overflow: hidden;
	margin-bottom: 70px;
	animation: privacyCardIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) both;
	box-shadow:
		0 20px 60px rgba(3, 45, 32, 0.06),
		0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

@keyframes privacyCardIn {
	0% { opacity: 0; transform: translateY(50px) scale(0.97); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.privacy-intro-glow {
	position: absolute;
	top: -30%;
	right: -15%;
	width: 50%;
	height: 150%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.12), transparent 60%);
	pointer-events: none;
	animation: privacyGlowPulse 5s ease-in-out infinite;
}

@keyframes privacyGlowPulse {
	0%, 100% { opacity: 0.5; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.1); }
}

.privacy-intro-border-flow {
	position: absolute;
	inset: -2px;
	border-radius: 30px;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		rgba(93, 229, 152, 0.4) 20%,
		rgba(8, 115, 68, 0.3) 40%,
		transparent 60%,
		transparent 100%
	);
	animation: privacyBorderFlow 6s linear infinite;
	z-index: -1;
}

@keyframes privacyBorderFlow {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.privacy-intro-inner {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 1;
}

/* Shield Icon */
.privacy-intro-icon-wrap {
	position: relative;
	width: 240px;
	height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.privacy-intro-shield {
	width: 120px;
	height: 120px;
	border-radius: 28px;
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.9), rgba(8, 115, 68, 0.85));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	position: relative;
	z-index: 3;
	box-shadow:
		0 15px 40px rgba(8, 115, 68, 0.35),
		0 0 0 4px rgba(93, 229, 152, 0.15);
	animation: privacyShieldFloat 4s ease-in-out infinite;
}

.privacy-intro-shield svg {
	width: 56px;
	height: 56px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

@keyframes privacyShieldFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-10px) rotate(-3deg); }
	75% { transform: translateY(8px) rotate(3deg); }
}

.privacy-intro-ring {
	position: absolute;
	border-radius: 50%;
	border: 2px dashed rgba(8, 115, 68, 0.2);
	animation: privacyRingSpin 12s linear infinite, privacyRingPulse 4s ease-in-out infinite;
}

.privacy-intro-ring:first-child {
	inset: 20px;
}

.privacy-intro-ring-2 {
	inset: 40px;
	border: 2px solid rgba(93, 229, 152, 0.25);
	border-style: solid;
	animation: privacyRingSpin 18s linear infinite reverse, privacyRingPulse 4s ease-in-out infinite 1s;
}

@keyframes privacyRingSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes privacyRingPulse {
	0%, 100% { transform: scale(1); opacity: 0.7; }
	50% { transform: scale(1.05); opacity: 1; }
}

.privacy-intro-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.privacy-particle {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.7);
	animation: privacyParticleFloat 4s ease-in-out infinite;
}

.privacy-particle.pp1 { top: 15%; left: 40%; animation-delay: 0s; }
.privacy-particle.pp2 { top: 50%; right: 5%; animation-delay: 1s; background: rgba(8, 115, 68, 0.6); width: 6px; height: 6px; }
.privacy-particle.pp3 { bottom: 20%; left: 20%; animation-delay: 2s; background: rgba(148, 235, 180, 0.7); width: 6px; height: 6px; }
.privacy-particle.pp4 { top: 30%; right: 25%; animation-delay: 3s; width: 6px; height: 6px; }

@keyframes privacyParticleFloat {
	0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
	50% { transform: translateY(-25px) scale(1.3); opacity: 1; }
}

/* Intro Text */
.privacy-intro-text {
	position: relative;
	z-index: 1;
}

.privacy-intro-badge {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: rgba(8, 115, 68, 1);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 6px 16px;
	background: rgba(8, 115, 68, 0.08);
	border-radius: 20px;
	margin-bottom: 18px;
	animation: privacyBadgePulse 3s ease-in-out infinite;
}

@keyframes privacyBadgePulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(8, 115, 68, 0.3); }
	50% { box-shadow: 0 0 0 8px rgba(8, 115, 68, 0); }
}

.privacy-intro-title {
	font-size: 38px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 16px;
	line-height: 1.2;
	letter-spacing: -0.5px;
}

.privacy-intro-desc {
	font-size: 15px;
	color: rgba(55, 75, 68, 0.85);
	line-height: 1.75;
	margin: 0 0 28px;
}

/* Stats */
.privacy-intro-stats {
	display: flex;
	align-items: center;
	gap: 24px;
}

.privacy-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.privacy-stat-num {
	font-size: 24px;
	font-weight: 800;
	color: rgba(8, 115, 68, 1);
	letter-spacing: -0.3px;
}

.privacy-stat-label {
	font-size: 12px;
	color: rgba(88, 101, 95, 0.8);
	letter-spacing: 0.5px;
}

.privacy-stat-divider {
	width: 2px;
	height: 36px;
	background: linear-gradient(180deg, transparent, rgba(93, 229, 152, 0.4), transparent);
	border-radius: 2px;
}

/* ===== Section Blocks ===== */
.privacy-sections {
	display: flex;
	flex-direction: column;
	gap: 28px;
	position: relative;
	z-index: 1;
}

.privacy-section-block {
	position: relative;
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 24px;
	background: #ffffff;
	border-radius: 22px;
	border: 2px solid rgba(3, 45, 32, 0.08);
	padding: 32px 36px;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: privacySectionIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.privacy-section-1 { animation-delay: 0.1s; }
.privacy-section-2 { animation-delay: 0.2s; }
.privacy-section-3 { animation-delay: 0.3s; }
.privacy-section-4 { animation-delay: 0.4s; }
.privacy-section-5 { animation-delay: 0.5s; }
.privacy-section-6 { animation-delay: 0.6s; }

@keyframes privacySectionIn {
	0% { opacity: 0; transform: translateX(-40px); }
	100% { opacity: 1; transform: translateX(0); }
}

.privacy-section-number {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
}

.privacy-section-num {
	font-size: 28px;
	font-weight: 800;
	color: rgba(8, 115, 68, 1);
	position: relative;
	z-index: 2;
	transition: all 0.4s ease;
}

.privacy-section-num-ring {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.2), rgba(8, 115, 68, 0.15));
	border: 2px solid rgba(93, 229, 152, 0.3);
	transition: all 0.4s ease;
	animation: privacyNumRingPulse 3s ease-in-out infinite;
}

@keyframes privacyNumRingPulse {
	0%, 100% { transform: scale(1); opacity: 0.8; }
	50% { transform: scale(1.08); opacity: 1; }
}

.privacy-section-body {
	position: relative;
	z-index: 1;
}

.privacy-section-title {
	font-size: 22px;
	font-weight: 700;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 10px;
	transition: all 0.4s ease;
}

.privacy-section-text {
	font-size: 14px;
	color: rgba(55, 75, 68, 0.88);
	line-height: 1.75;
	margin: 0 0 18px;
}

.privacy-section-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.privacy-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: rgba(8, 115, 68, 1);
	padding: 6px 14px;
	background: rgba(93, 229, 152, 0.12);
	border: 1px solid rgba(93, 229, 152, 0.25);
	border-radius: 20px;
	transition: all 0.35s ease;
	cursor: pointer;
}

.privacy-tag:hover {
	background: rgba(93, 229, 152, 0.25);
	border-color: rgba(93, 229, 152, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(93, 229, 152, 0.2);
}

.privacy-section-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	transform: skewX(-15deg);
	transition: left 0.8s ease;
	pointer-events: none;
}

.privacy-section-block:hover {
	transform: translateX(8px) scale(1.01);
	border-color: rgba(93, 229, 152, 0.5);
	box-shadow:
		0 15px 40px rgba(8, 115, 68, 0.1),
		0 0 0 2px rgba(93, 229, 152, 0.15);
}

.privacy-section-block:hover .privacy-section-num {
	transform: scale(1.1);
	text-shadow: 0 4px 12px rgba(8, 115, 68, 0.3);
}

.privacy-section-block:hover .privacy-section-num-ring {
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.4), rgba(8, 115, 68, 0.3));
	border-color: rgba(93, 229, 152, 0.6);
	transform: scale(1.1);
}

.privacy-section-block:hover .privacy-section-title {
	color: rgba(8, 115, 68, 1);
	transform: translateX(4px);
}

.privacy-section-block:hover .privacy-section-shine {
	left: 150%;
}

/* ===== CTA Card ===== */
.privacy-cta-wrap {
	margin-top: 70px;
	position: relative;
	z-index: 1;
	animation: privacyCtaIn 0.8s ease-out 0.8s both;
}

@keyframes privacyCtaIn {
	0% { opacity: 0; transform: translateY(30px); }
	100% { opacity: 1; transform: translateY(0); }
}

.privacy-cta-card {
	position: relative;
	background: linear-gradient(135deg, rgba(8, 115, 68, 1) 0%, rgba(6, 85, 50, 1) 50%, rgba(8, 115, 68, 1) 100%);
	border-radius: 28px;
	padding: 56px 60px;
	overflow: hidden;
	box-shadow:
		0 20px 60px rgba(8, 115, 68, 0.3),
		0 0 0 3px rgba(93, 229, 152, 0.15);
}

.privacy-cta-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 50%, rgba(93, 229, 152, 0.25), transparent 50%),
		radial-gradient(circle at 80% 50%, rgba(148, 235, 180, 0.2), transparent 50%);
	animation: privacyCtaBgShift 8s ease-in-out infinite;
}

@keyframes privacyCtaBgShift {
	0%, 100% { opacity: 0.6; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.05); }
}

.privacy-cta-content {
	position: relative;
	z-index: 1;
	text-align: center;
}

.privacy-cta-title {
	font-size: 32px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 14px;
	letter-spacing: -0.3px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.privacy-cta-desc {
	font-size: 15px;
	color: rgba(220, 245, 230, 0.9);
	line-height: 1.7;
	margin: 0 0 32px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.privacy-cta-buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
}

.privacy-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 34px;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.privacy-cta-btn svg {
	width: 18px;
	height: 18px;
	transition: all 0.4s ease;
}

.privacy-cta-btn-primary {
	background: #ffffff;
	color: rgba(8, 115, 68, 1);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.privacy-cta-btn-primary:hover {
	transform: translateY(-5px) scale(1.04);
	box-shadow:
		0 15px 40px rgba(0, 0, 0, 0.3),
		0 0 40px rgba(93, 229, 152, 0.3);
}

.privacy-cta-btn-primary:hover svg {
	transform: scale(1.1) rotate(-5deg);
}

.privacy-cta-btn-secondary {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
}

.privacy-cta-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.6);
	transform: translateY(-5px) scale(1.04);
	box-shadow:
		0 15px 40px rgba(0, 0, 0, 0.25),
		0 0 40px rgba(93, 229, 152, 0.2);
}

.privacy-cta-btn-secondary:hover svg {
	transform: scale(1.1);
}

.privacy-cta-btn-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	transition: left 0.8s ease;
}

.privacy-cta-btn:hover .privacy-cta-btn-shine {
	left: 150%;
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.privacy-intro-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.privacy-intro-icon-wrap {
		width: 200px;
		height: 200px;
	}
	.privacy-intro-shield {
		width: 100px;
		height: 100px;
	}
	.privacy-intro-shield svg {
		width: 48px;
		height: 48px;
	}
	.privacy-intro-title {
		font-size: 32px;
	}
}

@media (max-width: 767px) {
	.privacy-content-section {
		padding: 70px 0;
	}
	.privacy-intro-card {
		padding: 40px 28px;
		border-radius: 22px;
	}
	.privacy-intro-title {
		font-size: 26px;
	}
	.privacy-intro-stats {
		gap: 18px;
		flex-wrap: wrap;
	}
	.privacy-stat-num {
		font-size: 20px;
	}
	.privacy-section-block {
		grid-template-columns: 60px 1fr;
		padding: 24px 22px;
		gap: 18px;
	}
	.privacy-section-number {
		height: 60px;
	}
	.privacy-section-num {
		font-size: 22px;
	}
	.privacy-section-title {
		font-size: 18px;
	}
	.privacy-cta-card {
		padding: 40px 28px;
		border-radius: 22px;
	}
	.privacy-cta-title {
		font-size: 24px;
	}
	.privacy-cta-buttons {
		flex-direction: column;
		gap: 14px;
	}
	.privacy-cta-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.privacy-blob,
	.privacy-grid,
	.privacy-intro-ring,
	.privacy-intro-shield,
	.privacy-particle,
	.privacy-intro-badge,
	.privacy-section-num-ring,
	.privacy-cta-bg,
	.privacy-intro-glow,
	.privacy-intro-border-flow {
		animation: none !important;
	}
	.privacy-section-block:hover,
	.privacy-tag:hover {
		transform: none !important;
	}
}

/* ===== FAQ Section ===== */
.faq-section {
	position: relative;
	padding: 50px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f4f8f5 50%, #ffffff 100%);
}

.faq-bg-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.faq-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.45;
}

.faq-blob-1 {
	width: 500px;
	height: 500px;
	top: -120px;
	right: -80px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.4), transparent 70%);
	animation: faqBlob1 18s ease-in-out infinite;
}

@keyframes faqBlob1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-60px, 60px) scale(1.15); }
}

.faq-blob-2 {
	width: 400px;
	height: 400px;
	bottom: -80px;
	left: -60px;
	background: radial-gradient(circle, rgba(8, 115, 68, 0.25), transparent 70%);
	animation: faqBlob2 20s ease-in-out infinite;
}

@keyframes faqBlob2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(50px, -40px) scale(1.2); }
}

.faq-blob-3 {
	width: 300px;
	height: 300px;
	top: 40%;
	left: 45%;
	background: radial-gradient(circle, rgba(148, 235, 180, 0.35), transparent 70%);
	animation: faqBlob3 25s ease-in-out infinite;
}

@keyframes faqBlob3 {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.25); }
}

.faq-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(3, 45, 32, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(3, 45, 32, 0.025) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at center, black 25%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 70%);
	animation: faqGridShift 35s linear infinite;
}

@keyframes faqGridShift {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 48px 48px, 48px 48px; }
}

/* ===== Section Header ===== */
.faq-section-header {
	text-align: center;
	margin-bottom: 70px;
	position: relative;
	z-index: 1;
	animation: faqHeaderIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes faqHeaderIn {
	0% { opacity: 0; transform: translateY(30px); }
	100% { opacity: 1; transform: translateY(0); }
}

.faq-section-badge {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: rgba(8, 115, 68, 1);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 6px 18px;
	background: rgba(8, 115, 68, 0.08);
	border-radius: 20px;
	margin-bottom: 18px;
	animation: faqBadgePulse 3s ease-in-out infinite;
}

@keyframes faqBadgePulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(8, 115, 68, 0.3); }
	50% { box-shadow: 0 0 0 8px rgba(8, 115, 68, 0); }
}

.faq-section-title {
	font-size: 40px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 14px;
	line-height: 1.2;
	letter-spacing: -0.5px;
}

.faq-section-desc {
	font-size: 15px;
	color: rgba(55, 75, 68, 0.8);
	line-height: 1.7;
	margin: 0;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* ===== Category Cards ===== */
.faq-categories {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: relative;
	z-index: 1;
}

.faq-category-card {
	position: relative;
	background: #ffffff;
	border-radius: 24px;
	border: 2px solid rgba(220, 230, 225, 1);
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: faqCardIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.faq-cat-1 { animation-delay: 0.1s; }
.faq-cat-2 { animation-delay: 0.2s; }
.faq-cat-3 { animation-delay: 0.3s; }
.faq-cat-4 { animation-delay: 0.4s; }
.faq-cat-5 { animation-delay: 0.5s; }
.faq-cat-6 { animation-delay: 0.6s; }

@keyframes faqCardIn {
	0% { opacity: 0; transform: translateY(30px) scale(0.98); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.faq-card-glow {
	position: absolute;
	top: -50%;
	right: -10%;
	width: 40%;
	height: 200%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.08), transparent 60%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.faq-card-border-flow {
	position: absolute;
	inset: -2px;
	border-radius: 26px;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		rgba(93, 229, 152, 0.3) 15%,
		rgba(8, 115, 68, 0.25) 30%,
		transparent 50%,
		transparent 100%
	);
	animation: faqBorderFlow 8s linear infinite;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.5s ease;
}

@keyframes faqBorderFlow {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.faq-card-inner {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 0;
	position: relative;
	z-index: 1;
}

/* Left side - category info */
.faq-cat-left {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 36px 32px;
	border-right: 1px solid rgba(220, 230, 225, 1);
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.04) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.faq-cat-icon-wrap {
	position: relative;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.faq-cat-icon {
	width: 44px;
	height: 44px;
	position: relative;
	z-index: 3;
	transition: all 0.4s ease;
}

.faq-cat-icon-ring {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.15), rgba(8, 115, 68, 0.1));
	border: 2px solid rgba(93, 229, 152, 0.3);
	transition: all 0.4s ease;
	animation: faqIconRingPulse 3s ease-in-out infinite;
}

@keyframes faqIconRingPulse {
	0%, 100% { transform: scale(1); opacity: 0.8; }
	50% { transform: scale(1.08); opacity: 1; }
}

.faq-cat-icon-pulse {
	position: absolute;
	inset: -4px;
	border-radius: 20px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.15), transparent 70%);
	animation: faqIconPulse 3s ease-in-out infinite;
}

@keyframes faqIconPulse {
	0%, 100% { opacity: 0.4; transform: scale(1); }
	50% { opacity: 0.8; transform: scale(1.1); }
}

.faq-cat-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.faq-particle {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.6);
	animation: faqParticleFloat 4s ease-in-out infinite;
}

.faq-particle.fp1 { top: -5%; left: 80%; animation-delay: 0s; }
.faq-particle.fp2 { bottom: -5%; right: 10%; animation-delay: 1.3s; background: rgba(8, 115, 68, 0.5); width: 5px; height: 5px; }
.faq-particle.fp3 { top: 60%; left: -10%; animation-delay: 2.6s; background: rgba(148, 235, 180, 0.7); width: 5px; height: 5px; }

@keyframes faqParticleFloat {
	0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
	50% { transform: translateY(-15px) scale(1.2); opacity: 1; }
}

.faq-cat-text {
	flex: 1;
}

.faq-cat-title {
	font-size: 22px;
	font-weight: 700;
	color: rgba(0, 61, 46, 1);
	margin: 0 0 6px;
	transition: all 0.4s ease;
}

.faq-cat-desc {
	font-size: 13px;
	color: rgba(88, 101, 95, 0.85);
	line-height: 1.6;
	margin: 0;
}

/* Right side - accordion */
.faq-cat-right {
	padding: 16px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.faq-accordion {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.faq-accordion-item {
	border-bottom: 1px solid rgba(220, 230, 225, 1);
}

.faq-accordion-item:last-child {
	border-bottom: none;
}

.faq-accordion-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: all 0.3s ease;
}

.faq-accordion-trigger:hover .faq-accordion-q {
	color: rgba(8, 115, 68, 1);
	transform: translateX(4px);
}

.faq-accordion-q {
	font-size: 15px;
	font-weight: 600;
	color: rgba(3, 45, 32, 1);
	line-height: 1.5;
	transition: all 0.3s ease;
}

.faq-accordion-item.active .faq-accordion-q {
	color: rgba(8, 115, 68, 1);
}

.faq-accordion-icon {
	position: relative;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(93, 229, 152, 0.12);
	border-radius: 8px;
	border: 1px solid rgba(93, 229, 152, 0.25);
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-icon-plus,
.faq-icon-minus {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(8, 115, 68, 1);
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-icon-plus {
	width: 14px;
	height: 2px;
	border-radius: 2px;
}

.faq-icon-minus {
	width: 2px;
	height: 14px;
	border-radius: 2px;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0);
}

.faq-accordion-item.active .faq-accordion-icon {
	background: rgba(8, 115, 68, 1);
	border-color: rgba(8, 115, 68, 1);
	transform: rotate(90deg);
	box-shadow: 0 6px 15px rgba(8, 115, 68, 0.25);
}

.faq-accordion-item.active .faq-icon-plus {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0);
}

.faq-accordion-item.active .faq-icon-minus {
	opacity: 1;
	width: 14px;
	height: 2px;
	transform: translate(-50%, -50%) scale(1);
	background: #ffffff;
}

.faq-accordion-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-accordion-item.active .faq-accordion-panel {
	max-height: 300px;
}

.faq-accordion-content {
	padding: 0 0 16px;
	animation: faqPanelSlide 0.4s ease-out;
}

@keyframes faqPanelSlide {
	0% { opacity: 0; transform: translateY(-8px); }
	100% { opacity: 1; transform: translateY(0); }
}

.faq-accordion-content p {
	font-size: 14px;
	color: rgba(55, 75, 68, 0.85);
	line-height: 1.7;
	margin: 0;
}

/* Card hover effects */
.faq-category-card:hover {
	transform: translateY(-6px);
	border-color: rgba(93, 229, 152, 0.5);
	box-shadow:
		0 20px 50px rgba(8, 115, 68, 0.1),
		0 0 0 3px rgba(93, 229, 152, 0.15);
}

.faq-category-card:hover .faq-card-glow {
	opacity: 1;
}

.faq-category-card:hover .faq-card-border-flow {
	opacity: 1;
}

.faq-category-card:hover .faq-cat-icon-ring {
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.35), rgba(8, 115, 68, 0.25));
	border-color: rgba(93, 229, 152, 0.6);
	transform: scale(1.1);
}

.faq-category-card:hover .faq-cat-icon {
	transform: scale(1.1) rotate(-5deg);
	filter: drop-shadow(0 4px 10px rgba(8, 115, 68, 0.25));
}

.faq-category-card:hover .faq-cat-title {
	color: rgba(8, 115, 68, 1);
	transform: translateX(4px);
}

.faq-card-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	transform: skewX(-15deg);
	transition: left 0.8s ease;
	pointer-events: none;
}

.faq-category-card:hover .faq-card-shine {
	left: 150%;
}

/* ===== CTA Card ===== */
.faq-cta-wrap {
	margin-top: 70px;
	position: relative;
	z-index: 1;
	animation: faqCtaIn 0.8s ease-out 0.8s both;
}

@keyframes faqCtaIn {
	0% { opacity: 0; transform: translateY(30px); }
	100% { opacity: 1; transform: translateY(0); }
}

.faq-cta-card {
	position: relative;
	background: linear-gradient(135deg, rgba(8, 115, 68, 1) 0%, rgba(6, 85, 50, 1) 50%, rgba(8, 115, 68, 1) 100%);
	border-radius: 28px;
	padding: 56px 60px;
	overflow: hidden;
	box-shadow:
		0 20px 60px rgba(8, 115, 68, 0.3),
		0 0 0 3px rgba(93, 229, 152, 0.15);
}

.faq-cta-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 50%, rgba(93, 229, 152, 0.25), transparent 50%),
		radial-gradient(circle at 80% 50%, rgba(148, 235, 180, 0.2), transparent 50%);
	animation: faqCtaBgShift 8s ease-in-out infinite;
}

@keyframes faqCtaBgShift {
	0%, 100% { opacity: 0.6; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.05); }
}

.faq-cta-content {
	position: relative;
	z-index: 1;
	text-align: center;
}

.faq-cta-title {
	font-size: 32px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 14px;
	letter-spacing: -0.3px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.faq-cta-desc {
	font-size: 15px;
	color: rgba(220, 245, 230, 0.9);
	line-height: 1.7;
	margin: 0 0 32px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.faq-cta-buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
}

.faq-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 34px;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-cta-btn svg {
	width: 18px;
	height: 18px;
	transition: all 0.4s ease;
}

.faq-cta-btn-primary {
	background: #ffffff;
	color: rgba(8, 115, 68, 1);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.faq-cta-btn-primary:hover {
	transform: translateY(-5px) scale(1.04);
	box-shadow:
		0 15px 40px rgba(0, 0, 0, 0.3),
		0 0 40px rgba(93, 229, 152, 0.3);
}

.faq-cta-btn-primary:hover svg {
	transform: scale(1.1) rotate(-5deg);
}

.faq-cta-btn-secondary {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
}

.faq-cta-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.6);
	transform: translateY(-5px) scale(1.04);
	box-shadow:
		0 15px 40px rgba(0, 0, 0, 0.25),
		0 0 40px rgba(93, 229, 152, 0.2);
}

.faq-cta-btn-secondary:hover svg {
	transform: scale(1.1);
}

.faq-cta-btn-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	transition: left 0.8s ease;
}

.faq-cta-btn:hover .faq-cta-btn-shine {
	left: 150%;
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.faq-card-inner {
		grid-template-columns: 240px 1fr;
	}
	.faq-section-title {
		font-size: 34px;
	}
}

@media (max-width: 991px) {
	.faq-card-inner {
		grid-template-columns: 1fr;
	}
	.faq-cat-left {
		border-right: none;
		border-bottom: 1px solid rgba(220, 230, 225, 1);
		padding: 28px 28px;
	}
	.faq-cat-right {
		padding: 20px 28px 24px;
	}
}

@media (max-width: 767px) {
	.faq-section {
		padding: 70px 0;
	}
	.faq-section-title {
		font-size: 28px;
	}
	.faq-cat-left {
		padding: 24px 22px;
		gap: 16px;
	}
	.faq-cat-icon-wrap {
		width: 52px;
		height: 52px;
	}
	.faq-cat-icon {
		width: 36px;
		height: 36px;
	}
	.faq-cat-title {
		font-size: 18px;
	}
	.faq-cat-right {
		padding: 16px 22px 20px;
	}
	.faq-accordion-q {
		font-size: 14px;
	}
	.faq-cta-card {
		padding: 40px 28px;
		border-radius: 22px;
	}
	.faq-cta-title {
		font-size: 24px;
	}
	.faq-cta-buttons {
		flex-direction: column;
		gap: 14px;
	}
	.faq-cta-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.faq-blob,
	.faq-grid,
	.faq-badge,
	.faq-cat-icon-ring,
	.faq-cat-icon-pulse,
	.faq-particle,
	.faq-card-border-flow,
	.faq-cta-bg {
		animation: none !important;
	}
	.faq-category-card:hover,
	.faq-accordion-trigger:hover .faq-accordion-q,
	.faq-cat-icon {
		transform: none !important;
	}
}

/* ===== Important Notice Section ===== */
.notice-section {
	position: relative;
	padding: 90px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #fdf9f0 50%, #ffffff 100%);
}

.notice-bg-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.notice-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.5;
}

.notice-blob-1 {
	width: 500px;
	height: 500px;
	top: -120px;
	right: -80px;
	background: radial-gradient(circle, rgba(255, 200, 100, 0.35), transparent 70%);
	animation: noticeBlob1 18s ease-in-out infinite;
}

@keyframes noticeBlob1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-50px, 70px) scale(1.15); }
}

.notice-blob-2 {
	width: 400px;
	height: 400px;
	bottom: -100px;
	left: -60px;
	background: radial-gradient(circle, rgba(200, 130, 0, 0.25), transparent 70%);
	animation: noticeBlob2 20s ease-in-out infinite;
}

@keyframes noticeBlob2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(60px, -50px) scale(1.2); }
}

.notice-blob-3 {
	width: 350px;
	height: 350px;
	top: 50%;
	left: 30%;
	background: radial-gradient(circle, rgba(255, 220, 150, 0.3), transparent 70%);
	animation: noticeBlob3 25s ease-in-out infinite;
}

@keyframes noticeBlob3 {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.2) rotate(45deg); }
}

.notice-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(181, 104, 0, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(181, 104, 0, 0.03) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at center, black 20%, transparent 65%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 65%);
	animation: noticeGridShift 40s linear infinite;
}

@keyframes noticeGridShift {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 48px 48px, 48px 48px; }
}

/* ===== Notice Card ===== */
.notice-card {
	position: relative;
	background: rgba(255, 250, 240, 1);
	border-radius: 28px;
	border: 2px solid rgba(239, 212, 147, 1);
	overflow: hidden;
	animation: noticeCardIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) both;
	box-shadow:
		0 20px 60px rgba(181, 104, 0, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

@keyframes noticeCardIn {
	0% { opacity: 0; transform: translateY(40px) scale(0.98); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.notice-card-glow {
	position: absolute;
	top: -30%;
	right: -10%;
	width: 40%;
	height: 160%;
	background: radial-gradient(circle, rgba(255, 200, 100, 0.15), transparent 60%);
	pointer-events: none;
	animation: noticeGlowPulse 5s ease-in-out infinite;
}

@keyframes noticeGlowPulse {
	0%, 100% { opacity: 0.4; transform: scale(1); }
	50% { opacity: 0.8; transform: scale(1.08); }
}

.notice-card-border-flow {
	position: absolute;
	inset: -2px;
	border-radius: 30px;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		rgba(239, 212, 147, 0.5) 15%,
		rgba(181, 104, 0, 0.4) 30%,
		transparent 50%,
		transparent 100%
	);
	animation: noticeBorderFlow 6s linear infinite;
	z-index: -1;
}

@keyframes noticeBorderFlow {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.notice-card-inner {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 0;
	position: relative;
	z-index: 1;
}

/* Left side */
.notice-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 48px 32px;
	border-right: 1px solid rgba(239, 212, 147, 1);
	position: relative;
	background: linear-gradient(180deg, rgba(255, 245, 220, 0.6) 0%, rgba(255, 250, 240, 0.3) 100%);
}

.notice-icon-wrap {
	position: relative;
	width: 140px;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.notice-icon {
	width: 72px;
	height: 72px;
	position: relative;
	z-index: 3;
	animation: noticeIconFloat 3.5s ease-in-out infinite;
	filter: drop-shadow(0 8px 20px rgba(181, 104, 0, 0.25));
}

@keyframes noticeIconFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-8px) rotate(-2deg); }
	75% { transform: translateY(6px) rotate(2deg); }
}

.notice-icon-ring {
	position: absolute;
	inset: 15px;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(255, 220, 150, 0.5), rgba(239, 212, 147, 0.4));
	border: 2px solid rgba(239, 212, 147, 0.7);
	animation: noticeIconRingPulse 3s ease-in-out infinite;
}

@keyframes noticeIconRingPulse {
	0%, 100% { transform: scale(1); opacity: 0.8; }
	50% { transform: scale(1.1); opacity: 1; }
}

.notice-icon-pulse {
	position: absolute;
	inset: 0;
	border-radius: 28px;
	background: radial-gradient(circle, rgba(255, 200, 100, 0.25), transparent 65%);
	animation: noticeIconPulse 3s ease-in-out infinite;
}

@keyframes noticeIconPulse {
	0%, 100% { opacity: 0.4; transform: scale(1); }
	50% { opacity: 0.9; transform: scale(1.12); }
}

.notice-icon-bg {
	position: absolute;
	inset: 22px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(255, 230, 180, 0.4), rgba(239, 212, 147, 0.3));
	animation: noticeIconBgPulse 3s ease-in-out infinite 0.5s;
}

@keyframes noticeIconBgPulse {
	0%, 100% { transform: scale(1); opacity: 0.7; }
	50% { transform: scale(1.06); opacity: 1; }
}

.notice-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.notice-particle {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(239, 212, 147, 0.7);
	animation: noticeParticleFloat 4s ease-in-out infinite;
}

.notice-particle.np1 { top: 5%; left: 70%; animation-delay: 0s; }
.notice-particle.np2 { top: 40%; right: -5%; animation-delay: 1.2s; background: rgba(181, 104, 0, 0.6); width: 5px; height: 5px; }
.notice-particle.np3 { bottom: 10%; left: 10%; animation-delay: 2.4s; background: rgba(255, 200, 100, 0.7); width: 6px; height: 6px; }
.notice-particle.np4 { bottom: 30%; right: 15%; animation-delay: 3.2s; width: 5px; height: 5px; }

@keyframes noticeParticleFloat {
	0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
	50% { transform: translateY(-20px) scale(1.3); opacity: 1; }
}

.notice-title {
	font-size: 26px;
	font-weight: 800;
	color: rgba(181, 104, 0, 1);
	text-align: center;
	line-height: 1.25;
	margin: 0;
	letter-spacing: -0.3px;
	transition: all 0.4s ease;
}

/* Right side */
.notice-right {
	padding: 44px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

.notice-heading {
	font-size: 20px;
	font-weight: 700;
	color: rgba(120, 70, 0, 1);
	margin: 0 0 24px;
	line-height: 1.4;
	position: relative;
	padding-bottom: 14px;
	transition: all 0.4s ease;
}

.notice-heading::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 3px;
	background: linear-gradient(90deg, rgba(181, 104, 0, 1), rgba(239, 212, 147, 0.5));
	border-radius: 3px;
	transition: all 0.5s ease;
}

.notice-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.notice-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	animation: noticeItemIn 0.6s ease-out both;
	transition: all 0.4s ease;
}

.notice-item:nth-child(1) { animation-delay: 0.2s; }
.notice-item:nth-child(2) { animation-delay: 0.35s; }
.notice-item:nth-child(3) { animation-delay: 0.5s; }
.notice-item:nth-child(4) { animation-delay: 0.65s; }

@keyframes noticeItemIn {
	0% { opacity: 0; transform: translateX(-20px); }
	100% { opacity: 1; transform: translateX(0); }
}

.notice-bullet {
	display: flex;
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(181, 104, 0, 1), rgba(239, 212, 147, 1));
	margin-top: 8px;
	box-shadow: 0 0 0 4px rgba(239, 212, 147, 0.3);
	transition: all 0.4s ease;
	position: relative;
}

.notice-bullet::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid rgba(239, 212, 147, 0.5);
	animation: noticeBulletPulse 2.5s ease-in-out infinite;
}

@keyframes noticeBulletPulse {
	0%, 100% { transform: scale(1); opacity: 0.6; }
	50% { transform: scale(1.4); opacity: 0; }
}

.notice-item-text {
	font-size: 14px;
	color: rgba(80, 55, 20, 0.88);
	line-height: 1.7;
	transition: all 0.4s ease;
}

/* Card hover */
.notice-card:hover {
	transform: translateY(-4px);
	border-color: rgba(181, 104, 0, 0.6);
	box-shadow:
		0 25px 70px rgba(181, 104, 0, 0.15),
		0 0 0 3px rgba(239, 212, 147, 0.3);
}

.notice-card:hover .notice-title {
	transform: scale(1.03);
	filter: drop-shadow(0 4px 12px rgba(181, 104, 0, 0.2));
}

.notice-card:hover .notice-heading {
	color: rgba(181, 104, 0, 1);
	transform: translateX(4px);
}

.notice-card:hover .notice-heading::after {
	width: 100px;
	background: linear-gradient(90deg, rgba(181, 104, 0, 1), rgba(239, 212, 147, 1));
}

.notice-card:hover .notice-item {
	transform: translateX(6px);
}

.notice-card:hover .notice-bullet {
	transform: scale(1.3);
	box-shadow: 0 0 0 5px rgba(239, 212, 147, 0.4);
}

.notice-card-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	transform: skewX(-15deg);
	transition: left 0.8s ease;
	pointer-events: none;
}

.notice-card:hover .notice-card-shine {
	left: 150%;
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
	.notice-card-inner {
		grid-template-columns: 1fr;
	}
	.notice-left {
		border-right: none;
		border-bottom: 1px solid rgba(239, 212, 147, 1);
		padding: 36px 28px;
		flex-direction: row;
		gap: 28px;
	}
	.notice-icon-wrap {
		width: 110px;
		height: 110px;
	}
	.notice-icon {
		width: 56px;
		height: 56px;
	}
	.notice-right {
		padding: 32px 28px;
	}
}

@media (max-width: 767px) {
	.notice-section {
		padding: 60px 0;
	}
	.notice-card {
		border-radius: 22px;
	}
	.notice-left {
		flex-direction: column;
		gap: 18px;
		padding: 28px 22px;
	}
	.notice-icon-wrap {
		width: 90px;
		height: 90px;
	}
	.notice-icon {
		width: 48px;
		height: 48px;
	}
	.notice-title {
		font-size: 22px;
	}
	.notice-right {
		padding: 24px 22px 28px;
	}
	.notice-heading {
		font-size: 17px;
	}
	.notice-item-text {
		font-size: 13px;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.notice-blob,
	.notice-grid,
	.notice-card-glow,
	.notice-card-border-flow,
	.notice-icon,
	.notice-icon-ring,
	.notice-icon-pulse,
	.notice-icon-bg,
	.notice-particle,
	.notice-bullet::after {
		animation: none !important;
	}
	.notice-card:hover,
	.notice-card:hover .notice-title,
	.notice-card:hover .notice-heading,
	.notice-card:hover .notice-item,
	.notice-card:hover .notice-bullet {
		transform: none !important;
	}
}

/* ===== Before You Proceed Section ===== */
.before-section {
	position: relative;
	padding: 50px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f4f8f5 50%, #ffffff 100%);
}

.before-bg-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.before-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.5;
}

.before-blob-1 {
	width: 500px;
	height: 500px;
	top: -120px;
	left: -80px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.35), transparent 70%);
	animation: beforeBlob1 18s ease-in-out infinite;
}

@keyframes beforeBlob1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(60px, 80px) scale(1.15); }
}

.before-blob-2 {
	width: 450px;
	height: 450px;
	bottom: -100px;
	right: -60px;
	background: radial-gradient(circle, rgba(8, 115, 68, 0.25), transparent 70%);
	animation: beforeBlob2 20s ease-in-out infinite;
}

@keyframes beforeBlob2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-70px, -50px) scale(1.2); }
}

.before-blob-3 {
	width: 350px;
	height: 350px;
	top: 45%;
	left: 50%;
	background: radial-gradient(circle, rgba(148, 235, 180, 0.35), transparent 70%);
	animation: beforeBlob3 25s ease-in-out infinite;
}

@keyframes beforeBlob3 {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.25); }
}

.before-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(3, 45, 32, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(3, 45, 32, 0.025) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at center, black 25%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 70%);
	animation: beforeGridShift 35s linear infinite;
}

@keyframes beforeGridShift {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 48px 48px, 48px 48px; }
}

/* ===== Section Header ===== */
.before-section-header {
	text-align: center;
	margin-bottom: 70px;
	position: relative;
	z-index: 1;
	animation: beforeHeaderIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes beforeHeaderIn {
	0% { opacity: 0; transform: translateY(30px); }
	100% { opacity: 1; transform: translateY(0); }
}

.before-section-title {
	font-size: 42px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
	margin: 0;
	line-height: 1.2;
	letter-spacing: -0.5px;
	display: inline-block;
}

.before-title-underline {
	width: 70px;
	height: 4px;
	background: linear-gradient(90deg, rgba(8, 115, 68, 1), rgba(93, 229, 152, 1));
	border-radius: 4px;
	margin: 16px auto 0;
	animation: beforeUnderlinePulse 2.5s ease-in-out infinite;
	position: relative;
}

.before-title-underline::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: rgba(8, 115, 68, 1);
	box-shadow: 0 0 0 5px rgba(93, 229, 152, 0.4);
	animation: beforeUnderlineDot 2.5s ease-in-out infinite;
}

@keyframes beforeUnderlinePulse {
	0%, 100% { transform: scaleX(1); opacity: 1; }
	50% { transform: scaleX(1.15); opacity: 0.85; }
}

@keyframes beforeUnderlineDot {
	0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 5px rgba(93, 229, 152, 0.4); }
	50% { transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 0 0 10px rgba(93, 229, 152, 0); }
}

/* ===== Cards ===== */
.before-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	position: relative;
	z-index: 1;
}

.before-card {
	position: relative;
	background: #ffffff;
	border-radius: 24px;
	border: 2px solid rgba(220, 231, 227, 1);
	overflow: hidden;
	padding: 40px 28px 36px;
	text-align: center;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: beforeCardIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.before-card-1 { animation-delay: 0.1s; }
.before-card-2 { animation-delay: 0.2s; }
.before-card-3 { animation-delay: 0.3s; }
.before-card-4 { animation-delay: 0.4s; }

@keyframes beforeCardIn {
	0% { opacity: 0; transform: translateY(40px) scale(0.96); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.before-card-glow {
	position: absolute;
	top: -40%;
	left: -20%;
	width: 140%;
	height: 180%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.1), transparent 60%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.before-card-border-flow {
	position: absolute;
	inset: -2px;
	border-radius: 26px;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		rgba(93, 229, 152, 0.4) 15%,
		rgba(8, 115, 68, 0.3) 30%,
		transparent 50%,
		transparent 100%
	);
	animation: beforeBorderFlow 7s linear infinite;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.5s ease;
}

@keyframes beforeBorderFlow {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.before-card-inner {
	position: relative;
	z-index: 1;
}

/* Icon */
.before-icon-wrap {
	position: relative;
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

.before-icon {
	width: 58px;
	height: 58px;
	position: relative;
	z-index: 3;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: beforeIconFloat 3.5s ease-in-out infinite;
	filter: drop-shadow(0 6px 14px rgba(8, 115, 68, 0.2));
}

@keyframes beforeIconFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-6px) rotate(-2deg); }
	75% { transform: translateY(5px) rotate(2deg); }
}

.before-icon-ring {
	position: absolute;
	inset: 10px;
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.2), rgba(8, 115, 68, 0.15));
	border: 2px solid rgba(93, 229, 152, 0.35);
	animation: beforeIconRingPulse 3s ease-in-out infinite;
}

@keyframes beforeIconRingPulse {
	0%, 100% { transform: scale(1); opacity: 0.75; }
	50% { transform: scale(1.1); opacity: 1; }
}

.before-icon-pulse {
	position: absolute;
	inset: 0;
	border-radius: 26px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.2), transparent 65%);
	animation: beforeIconPulse 3s ease-in-out infinite;
}

@keyframes beforeIconPulse {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(1.1); }
}

.before-icon-bg {
	position: absolute;
	inset: 20px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.12), rgba(8, 115, 68, 0.08));
	animation: beforeIconBgPulse 3s ease-in-out infinite 0.5s;
}

@keyframes beforeIconBgPulse {
	0%, 100% { transform: scale(1); opacity: 0.6; }
	50% { transform: scale(1.06); opacity: 1; }
}

.before-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.before-particle {
	position: absolute;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.7);
	animation: beforeParticleFloat 4s ease-in-out infinite;
}

.before-particle.bp1 {
	width: 7px;
	height: 7px;
	top: 10%;
	left: 85%;
	animation-delay: 0s;
}

.before-particle.bp2 {
	width: 5px;
	height: 5px;
	bottom: 5%;
	right: -5%;
	animation-delay: 1.3s;
	background: rgba(8, 115, 68, 0.6);
}

.before-particle.bp3 {
	width: 6px;
	height: 6px;
	bottom: 40%;
	left: -8%;
	animation-delay: 2.6s;
	background: rgba(148, 235, 180, 0.7);
}

@keyframes beforeParticleFloat {
	0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
	50% { transform: translateY(-18px) scale(1.3); opacity: 1; }
}

/* Text */
.before-card-title {
	font-size: 18px;
	font-weight: 700;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 10px;
	line-height: 1.35;
	transition: all 0.4s ease;
}

.before-card-desc {
	font-size: 13px;
	color: rgba(88, 101, 95, 0.85);
	line-height: 1.7;
	margin: 0;
	transition: all 0.4s ease;
}

/* Card hover */
.before-card:hover {
	transform: translateY(-10px) scale(1.02);
	border-color: rgba(93, 229, 152, 0.55);
	box-shadow:
		0 25px 60px rgba(8, 115, 68, 0.12),
		0 0 0 3px rgba(93, 229, 152, 0.2);
}

.before-card:hover .before-card-glow {
	opacity: 1;
}

.before-card:hover .before-card-border-flow {
	opacity: 1;
}

.before-card:hover .before-icon {
	transform: scale(1.12) rotate(-4deg);
	filter: drop-shadow(0 10px 22px rgba(8, 115, 68, 0.3));
}

.before-card:hover .before-icon-ring {
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.45), rgba(8, 115, 68, 0.3));
	border-color: rgba(93, 229, 152, 0.7);
	transform: scale(1.15);
}

.before-card:hover .before-card-title {
	color: rgba(8, 115, 68, 1);
	transform: translateY(-2px);
}

.before-card:hover .before-card-desc {
	color: rgba(55, 75, 68, 0.95);
}

.before-card-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-15deg);
	transition: left 0.8s ease;
	pointer-events: none;
}

.before-card:hover .before-card-shine {
	left: 150%;
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.before-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.before-section-title {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	.before-section {
		padding: 70px 0;
	}
	.before-cards {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.before-section-title {
		font-size: 28px;
	}
	.before-card {
		padding: 36px 24px 32px;
		border-radius: 20px;
	}
	.before-icon-wrap {
		width: 100px;
		height: 100px;
	}
	.before-icon {
		width: 48px;
		height: 48px;
	}
	.before-card-title {
		font-size: 17px;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.before-blob,
	.before-grid,
	.before-icon,
	.before-icon-ring,
	.before-icon-pulse,
	.before-icon-bg,
	.before-particle,
	.before-title-underline,
	.before-title-underline::before,
	.before-card-border-flow {
		animation: none !important;
	}
	.before-card:hover,
	.before-card:hover .before-icon {
		transform: none !important;
	}
}

/* ===== Steps Section ===== */
.steps-section {
	position: relative;
	padding: 120px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f4f8f5 50%, #ffffff 100%);
}

.steps-bg-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.steps-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.5;
}

.steps-blob-1 {
	width: 550px;
	height: 550px;
	top: -150px;
	left: -100px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.4), transparent 70%);
	animation: stepsBlob1 18s ease-in-out infinite;
}

@keyframes stepsBlob1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(70px, 90px) scale(1.15); }
}

.steps-blob-2 {
	width: 450px;
	height: 450px;
	bottom: -120px;
	right: -80px;
	background: radial-gradient(circle, rgba(8, 115, 68, 0.3), transparent 70%);
	animation: stepsBlob2 20s ease-in-out infinite;
}

@keyframes stepsBlob2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-80px, -60px) scale(1.2); }
}

.steps-blob-3 {
	width: 350px;
	height: 350px;
	top: 40%;
	left: 45%;
	background: radial-gradient(circle, rgba(148, 235, 180, 0.35), transparent 70%);
	animation: stepsBlob3 25s ease-in-out infinite;
}

@keyframes stepsBlob3 {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.3) rotate(30deg); }
}

.steps-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(3, 45, 32, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(3, 45, 32, 0.025) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at center, black 20%, transparent 65%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 65%);
	animation: stepsGridShift 40s linear infinite;
}

@keyframes stepsGridShift {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 48px 48px, 48px 48px; }
}

.steps-line-container {
	position: absolute;
	top: 200px;
	left: 8%;
	right: 8%;
	height: 20px;
	pointer-events: none;
	z-index: 1;
}

.steps-connector-line {
	width: 100%;
	height: 10px;
}

/* ===== Section Header ===== */
.steps-section-header {
	text-align: center;
	margin-bottom: 80px;
	position: relative;
	z-index: 2;
	animation: stepsHeaderIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes stepsHeaderIn {
	0% { opacity: 0; transform: translateY(30px); }
	100% { opacity: 1; transform: translateY(0); }
}

.steps-section-title {
	font-size: 42px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
	margin: 0;
	line-height: 1.2;
	letter-spacing: -0.5px;
	display: inline-block;
}

.steps-title-underline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.steps-underline-bar {
	width: 80px;
	height: 4px;
	background: linear-gradient(90deg, rgba(8, 115, 68, 1), rgba(93, 229, 152, 1));
	border-radius: 4px;
	animation: stepsBarPulse 2.5s ease-in-out infinite;
}

@keyframes stepsBarPulse {
	0%, 100% { transform: scaleX(1); opacity: 1; }
	50% { transform: scaleX(1.2); opacity: 0.85; }
}

.steps-underline-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: rgba(8, 115, 68, 1);
	animation: stepsDotPulse 2.5s ease-in-out infinite;
}

@keyframes stepsDotPulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 5px rgba(93, 229, 152, 0.4); }
	50% { transform: scale(1.3); box-shadow: 0 0 0 12px rgba(93, 229, 152, 0); }
}

/* ===== Step Cards ===== */
.steps-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	position: relative;
	z-index: 2;
}

.step-card {
	position: relative;
	background: #ffffff;
	border-radius: 24px;
	border: 2px solid rgba(220, 231, 227, 1);
	overflow: visible;
	padding: 50px 28px 36px;
	text-align: center;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: stepCardIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.step-card-1 { animation-delay: 0.1s; }
.step-card-2 { animation-delay: 0.25s; }
.step-card-3 { animation-delay: 0.4s; }
.step-card-4 { animation-delay: 0.55s; }

@keyframes stepCardIn {
	0% { opacity: 0; transform: translateY(50px) scale(0.95); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.step-card-glow {
	position: absolute;
	top: -50%;
	left: -20%;
	width: 140%;
	height: 200%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.1), transparent 55%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s ease;
	border-radius: 24px;
}

.step-card-border-flow {
	position: absolute;
	inset: -2px;
	border-radius: 26px;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		rgba(93, 229, 152, 0.45) 12%,
		rgba(8, 115, 68, 0.35) 25%,
		transparent 45%,
		transparent 100%
	);
	animation: stepsBorderFlow 7s linear infinite;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.5s ease;
}

@keyframes stepsBorderFlow {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Step Number */
.step-number-wrap {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

.step-number {
	position: relative;
	z-index: 3;
	font-size: 18px;
	font-weight: 800;
	color: #ffffff;
	background: linear-gradient(135deg, rgba(8, 115, 68, 1), rgba(6, 85, 50, 1));
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 8px 20px rgba(8, 115, 68, 0.35),
		0 0 0 3px rgba(255, 255, 255, 1),
		0 0 0 5px rgba(93, 229, 152, 0.3);
	transition: all 0.4s ease;
}

.step-number-ring {
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px dashed rgba(93, 229, 152, 0.5);
	animation: stepsNumberRing 8s linear infinite;
}

@keyframes stepsNumberRing {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.step-number-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.4), transparent 65%);
	animation: stepsNumberPulse 2.5s ease-in-out infinite;
}

@keyframes stepsNumberPulse {
	0%, 100% { opacity: 0.4; transform: scale(1); }
	50% { opacity: 0.8; transform: scale(1.3); }
}

/* Icon */
.step-icon-wrap {
	position: relative;
	width: 130px;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}

.step-icon {
	width: 62px;
	height: 62px;
	position: relative;
	z-index: 3;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: stepIconFloat 3.5s ease-in-out infinite;
	filter: drop-shadow(0 8px 18px rgba(8, 115, 68, 0.22));
}

@keyframes stepIconFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-7px) rotate(-2deg); }
	75% { transform: translateY(6px) rotate(2deg); }
}

.step-icon-ring {
	position: absolute;
	inset: 10px;
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.2), rgba(8, 115, 68, 0.15));
	border: 2px solid rgba(93, 229, 152, 0.35);
	animation: stepIconRingPulse 3s ease-in-out infinite;
}

@keyframes stepIconRingPulse {
	0%, 100% { transform: scale(1); opacity: 0.75; }
	50% { transform: scale(1.1); opacity: 1; }
}

.step-icon-pulse {
	position: absolute;
	inset: 0;
	border-radius: 26px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.2), transparent 65%);
	animation: stepIconPulse 3s ease-in-out infinite;
}

@keyframes stepIconPulse {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(1.12); }
}

.step-icon-bg {
	position: absolute;
	inset: 22px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.12), rgba(8, 115, 68, 0.08));
	animation: stepIconBgPulse 3s ease-in-out infinite 0.5s;
}

@keyframes stepIconBgPulse {
	0%, 100% { transform: scale(1); opacity: 0.6; }
	50% { transform: scale(1.06); opacity: 1; }
}

.step-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.step-particle {
	position: absolute;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.7);
	animation: stepParticleFloat 4s ease-in-out infinite;
}

.step-particle.sp1 {
	width: 7px;
	height: 7px;
	top: 5%;
	left: 80%;
	animation-delay: 0s;
}

.step-particle.sp2 {
	width: 5px;
	height: 5px;
	bottom: 10%;
	right: -5%;
	animation-delay: 1.5s;
	background: rgba(8, 115, 68, 0.6);
}

.step-particle.sp3 {
	width: 6px;
	height: 6px;
	bottom: 30%;
	left: -8%;
	animation-delay: 2.8s;
	background: rgba(148, 235, 180, 0.7);
}

@keyframes stepParticleFloat {
	0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
	50% { transform: translateY(-20px) scale(1.3); opacity: 1; }
}

/* Text */
.step-card-inner {
	position: relative;
	z-index: 1;
}

.step-card-title {
	font-size: 19px;
	font-weight: 700;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 10px;
	line-height: 1.35;
	transition: all 0.4s ease;
}

.step-card-desc {
	font-size: 13px;
	color: rgba(88, 101, 95, 0.85);
	line-height: 1.7;
	margin: 0;
	transition: all 0.4s ease;
}

/* Card hover */
.step-card:hover {
	transform: translateY(-14px) scale(1.03);
	border-color: rgba(93, 229, 152, 0.55);
	box-shadow:
		0 30px 70px rgba(8, 115, 68, 0.15),
		0 0 0 3px rgba(93, 229, 152, 0.25);
}

.step-card:hover .step-card-glow {
	opacity: 1;
}

.step-card:hover .step-card-border-flow {
	opacity: 1;
}

.step-card:hover .step-number {
	transform: scale(1.1);
	box-shadow:
		0 12px 28px rgba(8, 115, 68, 0.45),
		0 0 0 3px rgba(255, 255, 255, 1),
		0 0 0 8px rgba(93, 229, 152, 0.4);
}

.step-card:hover .step-icon {
	transform: scale(1.15) rotate(-5deg);
	filter: drop-shadow(0 12px 26px rgba(8, 115, 68, 0.3));
}

.step-card:hover .step-icon-ring {
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.5), rgba(8, 115, 68, 0.35));
	border-color: rgba(93, 229, 152, 0.75);
	transform: scale(1.15);
}

.step-card:hover .step-card-title {
	color: rgba(8, 115, 68, 1);
	transform: translateY(-3px);
}

.step-card:hover .step-card-desc {
	color: rgba(55, 75, 68, 0.95);
}

.step-card-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-15deg);
	transition: left 0.8s ease;
	pointer-events: none;
}

.step-card:hover .step-card-shine {
	left: 150%;
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.steps-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.steps-section-title {
		font-size: 36px;
	}
	.steps-line-container {
		display: none;
	}
}

@media (max-width: 767px) {
	.steps-section {
		padding: 80px 0;
	}
	.steps-cards {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.steps-section-title {
		font-size: 28px;
	}
	.step-card {
		padding: 50px 24px 32px;
		border-radius: 20px;
	}
	.step-icon-wrap {
		width: 110px;
		height: 110px;
	}
	.step-icon {
		width: 52px;
		height: 52px;
	}
	.step-card-title {
		font-size: 17px;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.steps-blob,
	.steps-grid,
	.steps-connector-line path,
	.steps-underline-bar,
	.steps-underline-dot,
	.step-number-ring,
	.step-number-pulse,
	.step-icon,
	.step-icon-ring,
	.step-icon-pulse,
	.step-icon-bg,
	.step-particle,
	.step-card-border-flow {
		animation: none !important;
	}
	.step-card:hover,
	.step-card:hover .step-icon,
	.step-card:hover .step-number {
		transform: none !important;
	}
}

/* ===== Request Form Section ===== */
.request-form-section {
	position: relative;
	padding: 50px 0;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f4f8f5 50%, #ffffff 100%);
}

.request-bg-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.request-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.5;
}

.request-blob-1 {
	width: 500px;
	height: 500px;
	top: -120px;
	left: -80px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.35), transparent 70%);
	animation: requestBlob1 18s ease-in-out infinite;
}

@keyframes requestBlob1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(60px, 80px) scale(1.15); }
}

.request-blob-2 {
	width: 450px;
	height: 450px;
	bottom: -100px;
	right: -80px;
	background: radial-gradient(circle, rgba(8, 120, 76, 0.3), transparent 70%);
	animation: requestBlob2 20s ease-in-out infinite;
}

@keyframes requestBlob2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-70px, -50px) scale(1.2); }
}

.request-blob-3 {
	width: 350px;
	height: 350px;
	top: 50%;
	left: 50%;
	background: radial-gradient(circle, rgba(148, 235, 180, 0.35), transparent 70%);
	animation: requestBlob3 25s ease-in-out infinite;
}

@keyframes requestBlob3 {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.25); }
}

.request-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(3, 45, 32, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(3, 45, 32, 0.025) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at center, black 25%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 70%);
	animation: requestGridShift 40s linear infinite;
}

@keyframes requestGridShift {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 48px 48px, 48px 48px; }
}

/* ===== Form Card ===== */
.request-form-card {
	position: relative;
	background: #ffffff;
	border-radius: 28px;
	border: 2px solid rgba(207, 218, 214, 1);
	overflow: hidden;
	animation: requestCardIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) both;
	box-shadow:
		0 25px 70px rgba(8, 120, 76, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

@keyframes requestCardIn {
	0% { opacity: 0; transform: translateY(40px) scale(0.97); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.request-card-glow {
	position: absolute;
	top: -30%;
	right: -10%;
	width: 40%;
	height: 160%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.12), transparent 60%);
	pointer-events: none;
	animation: requestGlowPulse 5s ease-in-out infinite;
}

@keyframes requestGlowPulse {
	0%, 100% { opacity: 0.4; transform: scale(1); }
	50% { opacity: 0.8; transform: scale(1.08); }
}

.request-card-border-flow {
	position: absolute;
	inset: -2px;
	border-radius: 30px;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		rgba(93, 229, 152, 0.4) 15%,
		rgba(8, 120, 76, 0.3) 30%,
		transparent 50%,
		transparent 100%
	);
	animation: requestBorderFlow 6s linear infinite;
	z-index: -1;
}

@keyframes requestBorderFlow {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.request-form-inner {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 0;
	position: relative;
	z-index: 1;
}

/* Left side */
.request-form-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	padding: 50px 36px;
	border-right: 1px solid rgba(207, 218, 214, 1);
	background: linear-gradient(180deg, rgba(93, 229, 152, 0.04) 0%, rgba(255, 255, 255, 0.3) 100%);
}

.request-img-wrap {
	position: relative;
	width: 220px;
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.request-img {
	width: 130px;
	height: 130px;
	position: relative;
	z-index: 3;
	animation: requestImgFloat 4s ease-in-out infinite;
	filter: drop-shadow(0 10px 24px rgba(8, 120, 76, 0.2));
}

@keyframes requestImgFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-10px) rotate(-2deg); }
	75% { transform: translateY(8px) rotate(2deg); }
}

.request-img-ring {
	position: absolute;
	inset: 25px;
	border-radius: 28px;
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.2), rgba(8, 120, 76, 0.15));
	border: 2px solid rgba(93, 229, 152, 0.35);
	animation: requestImgRingPulse 3s ease-in-out infinite;
}

@keyframes requestImgRingPulse {
	0%, 100% { transform: scale(1); opacity: 0.75; }
	50% { transform: scale(1.08); opacity: 1; }
}

.request-img-pulse {
	position: absolute;
	inset: 10px;
	border-radius: 32px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.18), transparent 65%);
	animation: requestImgPulse 3s ease-in-out infinite;
}

@keyframes requestImgPulse {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(1.08); }
}

.request-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.request-particle {
	position: absolute;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.7);
	animation: requestParticleFloat 4s ease-in-out infinite;
}

.request-particle.rp1 { width: 8px; height: 8px; top: 10%; left: 85%; animation-delay: 0s; }
.request-particle.rp2 { width: 6px; height: 6px; bottom: 15%; right: -5%; animation-delay: 1.3s; background: rgba(8, 120, 76, 0.6); }
.request-particle.rp3 { width: 7px; height: 7px; bottom: 40%; left: -5%; animation-delay: 2.6s; background: rgba(148, 235, 180, 0.7); }

@keyframes requestParticleFloat {
	0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
	50% { transform: translateY(-20px) scale(1.3); opacity: 1; }
}

.request-left-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: rgba(93, 229, 152, 0.08);
	border: 1px solid rgba(93, 229, 152, 0.2);
	border-radius: 14px;
	transition: all 0.4s ease;
}

.request-left-badge:hover {
	background: rgba(93, 229, 152, 0.15);
	border-color: rgba(93, 229, 152, 0.4);
	transform: translateY(-2px);
}

.request-badge-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.request-badge-text {
	font-size: 12px;
	color: rgba(55, 75, 68, 0.9);
	line-height: 1.55;
	margin: 0;
}

/* Right side */
.request-form-right {
	padding: 50px 48px;
	position: relative;
}

.request-form-title {
	font-size: 30px;
	font-weight: 800;
	color: rgba(0, 61, 46, 1);
	margin: 0 0 28px;
	line-height: 1.25;
	letter-spacing: -0.3px;
	position: relative;
	padding-bottom: 16px;
}

.request-form-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 70px;
	height: 4px;
	background: linear-gradient(90deg, rgba(8, 120, 76, 1), rgba(93, 229, 152, 0.6));
	border-radius: 4px;
}

.request-delete-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.request-form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.request-form-label {
	font-size: 14px;
	font-weight: 600;
	color: rgba(3, 45, 32, 1);
}

.required-mark {
	color: rgba(220, 38, 38, 1);
	font-weight: 700;
}

.request-form-input {
	width: 100%;
	height: 48px;
	padding: 0 18px;
	font-size: 14px;
	color: rgba(3, 45, 32, 1);
	background: #ffffff;
	border: 2px solid rgba(207, 218, 214, 1);
	border-radius: 14px;
	outline: none;
	transition: all 0.4s ease;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.request-form-input:focus {
	border-color: rgba(8, 120, 76, 1);
	box-shadow: 0 0 0 4px rgba(8, 120, 76, 0.1);
}

.request-form-input.invalid {
	border-color: rgba(220, 38, 38, 1);
	animation: requestShake 0.4s ease;
}

@keyframes requestShake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	50% { transform: translateX(6px); }
	75% { transform: translateX(-4px); }
}

.request-form-textarea {
	width: 100%;
	height: 100px;
	padding: 14px 18px;
	font-size: 14px;
	color: rgba(3, 45, 32, 1);
	background: #ffffff;
	border: 2px solid rgba(207, 218, 214, 1);
	border-radius: 14px;
	outline: none;
	transition: all 0.4s ease;
	font-family: inherit;
	resize: vertical;
}

.request-form-textarea:focus {
	border-color: rgba(8, 120, 76, 1);
	box-shadow: 0 0 0 4px rgba(8, 120, 76, 0.1);
}

.request-form-error {
	font-size: 12px;
	color: rgba(220, 38, 38, 1);
	font-weight: 500;
	min-height: 16px;
	opacity: 0;
	transform: translateY(-5px);
	transition: all 0.3s ease;
}

.request-form-error.show {
	opacity: 1;
	transform: translateY(0);
}

/* Form actions */
.request-form-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-top: 8px;
}

.request-submit-btn {
	position: relative;
	width: 100%;
	max-width: 320px;
	padding: 16px 36px;
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	background: rgba(8, 120, 76, 1);
	border: none;
	border-radius: 50px;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 8px 25px rgba(8, 120, 76, 0.3);
	font-family: inherit;
}

.request-submit-btn:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow:
		0 15px 40px rgba(8, 120, 76, 0.4),
		0 0 40px rgba(93, 229, 152, 0.2);
}

.request-submit-btn:active {
	transform: translateY(-1px) scale(1);
}

.request-btn-text {
	position: relative;
	z-index: 1;
}

.request-btn-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.8s ease;
}

.request-submit-btn:hover .request-btn-shine {
	left: 150%;
}

.request-support-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(8, 120, 76, 1);
	text-decoration: none;
	transition: all 0.3s ease;
}

.request-support-link svg {
	width: 18px;
	height: 18px;
}

.request-support-link:hover {
	color: rgba(6, 100, 63, 1);
	transform: translateY(-2px);
}

.request-card-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	transform: skewX(-15deg);
	transition: left 0.8s ease;
	pointer-events: none;
}

.request-form-card:hover .request-card-shine {
	left: 150%;
}

/* ===== Modals ===== */
.form-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.form-modal.active {
	opacity: 1;
	visibility: visible;
}

.form-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(3, 45, 32, 0.55);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.form-modal-container {
	position: relative;
	width: 90%;
	max-width: 520px;
	background: #ffffff;
	border-radius: 32px;
	overflow: hidden;
	transform: scale(0.7) translateY(40px);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow:
		0 40px 80px rgba(3, 45, 32, 0.25),
		0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.form-modal.active .form-modal-container {
	transform: scale(1) translateY(0);
}

/* Modal bg effects */
.form-modal-bg-effects {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.form-modal-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
}

.form-modal-blob-1 {
	width: 300px;
	height: 300px;
	top: -100px;
	right: -80px;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.35), transparent 70%);
	animation: modalBlob1 10s ease-in-out infinite;
}

@keyframes modalBlob1 {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-40px, 30px); }
}

.form-modal-blob-2 {
	width: 250px;
	height: 250px;
	bottom: -80px;
	left: -60px;
	background: radial-gradient(circle, rgba(8, 120, 76, 0.25), transparent 70%);
	animation: modalBlob2 12s ease-in-out infinite;
}

@keyframes modalBlob2 {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(40px, -30px); }
}

.form-modal-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	border: 2px dashed rgba(8, 120, 76, 0.2);
	transform: translate(-50%, -50%);
	animation: modalRingSpin 15s linear infinite;
}

.form-modal-ring-2 {
	width: 380px;
	height: 380px;
	border: 1px dashed rgba(93, 229, 152, 0.15);
	animation: modalRingSpin 20s linear infinite reverse;
}

@keyframes modalRingSpin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Modal content */
.form-modal-content {
	position: relative;
	z-index: 1;
	padding: 56px 48px 44px;
	text-align: center;
}

.form-modal-icon-wrap {
	position: relative;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

.form-modal-icon-bg {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(93, 229, 152, 0.2), rgba(8, 120, 76, 0.15));
	animation: modalIconBgPulse 3s ease-in-out infinite;
}

@keyframes modalIconBgPulse {
	0%, 100% { transform: scale(1); opacity: 0.8; }
	50% { transform: scale(1.1); opacity: 1; }
}

.form-modal-icon-pulse {
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(93, 229, 152, 0.25), transparent 65%);
	animation: modalIconPulse 2.5s ease-in-out infinite;
}

@keyframes modalIconPulse {
	0%, 100% { opacity: 0.5; transform: scale(1); }
	50% { opacity: 0.9; transform: scale(1.15); }
}

.form-modal-icon {
	width: 48px;
	height: 48px;
	color: rgba(8, 120, 76, 1);
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 4px 10px rgba(8, 120, 76, 0.3));
	animation: modalIconFloat 2.5s ease-in-out infinite;
}

@keyframes modalIconFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

.form-modal-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.form-modal-particle {
	position: absolute;
	border-radius: 50%;
	background: rgba(93, 229, 152, 0.6);
}

.form-modal-particle.mp1 { width: 6px; height: 6px; top: 10%; left: 90%; animation: modalParticleFloat 3s ease-in-out infinite; }
.form-modal-particle.mp2 { width: 5px; height: 5px; bottom: 15%; right: 85%; animation: modalParticleFloat 3s ease-in-out infinite 0.8s; background: rgba(8, 120, 76, 0.5); }
.form-modal-particle.mp3 { width: 5px; height: 5px; top: 60%; left: 5%; animation: modalParticleFloat 3s ease-in-out infinite 1.6s; background: rgba(148, 235, 180, 0.6); }

@keyframes modalParticleFloat {
	0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
	50% { transform: translateY(-15px) scale(1.2); opacity: 0.8; }
}

.form-modal-title {
	font-size: 26px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
	margin: 0 0 14px;
	letter-spacing: -0.3px;
}

.form-modal-message {
	font-size: 15px;
	color: rgba(55, 75, 68, 0.9);
	line-height: 1.7;
	margin: 0 0 20px;
}

.form-modal-errors {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
}

.form-modal-errors li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: rgba(3, 45, 32, 0.9);
	padding: 10px 14px;
	background: rgba(93, 229, 152, 0.1);
	border: 1px solid rgba(93, 229, 152, 0.2);
	border-radius: 12px;
	animation: modalErrorItemIn 0.4s ease-out both;
}

.form-modal-errors li:nth-child(1) { animation-delay: 0.1s; }
.form-modal-errors li:nth-child(2) { animation-delay: 0.2s; }
.form-modal-errors li:nth-child(3) { animation-delay: 0.3s; }

@keyframes modalErrorItemIn {
	0% { opacity: 0; transform: translateX(-10px); }
	100% { opacity: 1; transform: translateX(0); }
}

.form-modal-errors li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(8, 120, 76, 1);
	flex-shrink: 0;
}

/* Modal info grid (success) */
.form-modal-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 0 0 28px;
}

.form-modal-info-item {
	padding: 14px 16px;
	background: rgba(93, 229, 152, 0.08);
	border: 1px solid rgba(93, 229, 152, 0.2);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	animation: modalInfoIn 0.5s ease-out both;
}

.form-modal-info-item:nth-child(1) { animation-delay: 0.2s; }
.form-modal-info-item:nth-child(2) { animation-delay: 0.3s; }

@keyframes modalInfoIn {
	0% { opacity: 0; transform: translateY(10px); }
	100% { opacity: 1; transform: translateY(0); }
}

.form-modal-info-label {
	font-size: 11px;
	font-weight: 700;
	color: rgba(8, 120, 76, 1);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.form-modal-info-value {
	font-size: 16px;
	font-weight: 800;
	color: rgba(3, 45, 32, 1);
}

/* Modal close button */
.form-modal-close-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 40px;
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	background: rgba(8, 120, 76, 1);
	border: none;
	border-radius: 50px;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 8px 25px rgba(8, 120, 76, 0.35);
	font-family: inherit;
}

.form-modal-close-btn:hover {
	transform: translateY(-4px) scale(1.04);
	box-shadow:
		0 15px 40px rgba(8, 120, 76, 0.45),
		0 0 40px rgba(93, 229, 152, 0.25);
}

.form-modal-btn-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.8s ease;
}

.form-modal-close-btn:hover .form-modal-btn-shine {
	left: 150%;
}

/* Confetti for success modal */
.form-modal-confetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.confetti {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	top: 20%;
	left: 50%;
	animation: confettiFall 3s ease-out infinite;
}

.confetti.c1 { background: rgba(93, 229, 152, 1); animation-delay: 0s; left: 20%; }
.confetti.c2 { background: rgba(8, 120, 76, 1); animation-delay: 0.3s; left: 35%; width: 8px; height: 8px; }
.confetti.c3 { background: rgba(148, 235, 180, 1); animation-delay: 0.6s; left: 50%; }
.confetti.c4 { background: rgba(8, 115, 68, 1); animation-delay: 0.9s; left: 65%; width: 12px; height: 6px; border-radius: 4px; }
.confetti.c5 { background: rgba(93, 229, 152, 0.8); animation-delay: 1.2s; left: 75%; width: 8px; height: 8px; }
.confetti.c6 { background: rgba(8, 120, 76, 0.8); animation-delay: 1.5s; left: 45%; }
.confetti.c7 { background: rgba(148, 235, 180, 0.9); animation-delay: 1.8s; left: 30%; width: 12px; height: 6px; border-radius: 4px; }
.confetti.c8 { background: rgba(8, 115, 68, 0.9); animation-delay: 2.1s; left: 70%; width: 6px; height: 10px; border-radius: 3px; }

@keyframes confettiFall {
	0% { transform: translateY(0) rotate(0deg); opacity: 1; }
	100% { transform: translateY(250px) rotate(720deg); opacity: 0; }
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
	.request-form-inner {
		grid-template-columns: 1fr;
	}
	.request-form-left {
		border-right: none;
		border-bottom: 1px solid rgba(207, 218, 214, 1);
		padding: 40px 32px;
		flex-direction: row;
		gap: 28px;
	}
	.request-img-wrap {
		width: 170px;
		height: 170px;
	}
	.request-img {
		width: 100px;
		height: 100px;
	}
	.request-form-right {
		padding: 40px 36px;
	}
	.request-form-title {
		font-size: 26px;
	}
}

@media (max-width: 767px) {
	.request-form-section {
		padding: 70px 0;
	}
	.request-form-card {
		border-radius: 22px;
	}
	.request-form-left {
		flex-direction: column;
		gap: 24px;
		padding: 32px 24px;
	}
	.request-img-wrap {
		width: 140px;
		height: 140px;
	}
	.request-img {
		width: 80px;
		height: 80px;
	}
	.request-form-right {
		padding: 32px 24px;
	}
	.request-form-title {
		font-size: 22px;
	}
	.request-form-textarea {
		height: 80px;
	}
	.form-modal-container {
		width: 95%;
		border-radius: 24px;
	}
	.form-modal-content {
		padding: 44px 28px 36px;
	}
	.form-modal-title {
		font-size: 22px;
	}
	.form-modal-info-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
	.request-blob,
	.request-grid,
	.request-img,
	.request-img-ring,
	.request-img-pulse,
	.request-particle,
	.request-card-glow,
	.request-card-border-flow,
	.form-modal-blob,
	.form-modal-ring,
	.form-modal-icon,
	.form-modal-icon-bg,
	.form-modal-icon-pulse,
	.form-modal-particle,
	.confetti {
		animation: none !important;
	}
	.form-modal-container {
		transform: none !important;
	}
}