/*
Theme Name: Korea Care Platform
Theme URI: http://example.com/koreacareplatform
Author: Antigravity
Author URI: http://example.com
Description: 肄붾━?꾩??댄뵆?ロ뤌???꾪븳 而ㅼ뒪?€ ?뚮뱶?꾨젅???뚮쭏?낅땲??
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: koreacareplatform
*/

/* Basic Reset & Setup */
:root {
	--primary-color: #169cee;
	--dark-color: #333;
	--light-bg: #f5f7fa;
	--white: #ffffff;
	--text-color: #444;
	--heading-color: #111;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.7;
	color: var(--text-color);
	background-color: var(--white);
	font-size: 18px;
	/* Enforce large base font */
	margin: 0;
}

a {
	text-decoration: none;
	color: inherit;
	transition: all 0.3s ease;
}

ul,
ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--heading-color);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 1rem;
	margin-top: 0;
}

/* Utilities */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.small-container {
	max-width: 900px;
}

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

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.mb-3 {
	margin-bottom: 1rem;
}

.mb-4 {
	margin-bottom: 1.5rem;
}

.mb-5 {
	margin-bottom: 3rem;
}

.mt-5 {
	margin-top: 3rem;
}

.btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 50px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: center;
	border: none;
}

.btn-primary {
	background-color: var(--primary-color);
	color: #fff;
	border: 2px solid var(--primary-color);
}

.btn-primary:hover {
	background-color: #1280c4;
	border-color: #1280c4;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(22, 156, 238, 0.3);
	color: #fff;
}

.btn-large {
	font-size: 1.3rem;
	padding: 18px 45px;
}

.section-padding {
	padding: 100px 0;
}

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

.bg-dark {
	background-color: #2c3e50;
	color: #fff;
}

.text-white {
	color: #fff !important;
}

.text-white-50 {
	color: rgba(255, 255, 255, 0.6) !important;
}

/* Header Styles */
.site-header {
	border-bottom: 1px solid #eaeaea;
	padding: 1rem 0;
	background-color: #fff;
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* ... existing code ... */



/* WordPress Admin Bar Offset */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
		/* Admin bar scrolls away on small screens */
	}
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	flex-wrap: nowrap;
	gap: 30px;
	position: relative;
}

.site-branding {
	flex-shrink: 0;
}

.site-branding img,
.custom-logo {
	max-height: 50px;
	width: auto;
	display: block;
}

.site-title a {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--primary-color);
}

/* Navigation Menus */
.main-navigation {
	flex: 1;
	display: flex;
	justify-content: center;
}

.main-navigation ul {
	display: flex;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--dark-color);
	padding: 10px 0;
	display: block;
}

.main-navigation a:hover {
	color: var(--primary-color);
}

.top-navigation ul {
	display: flex;
	gap: 15px;
	font-size: 0.95rem;
	color: #666;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Mobile Menu Toggle Button */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 24px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1001;
}

.menu-icon-bar {
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--primary-color);
	border-radius: 2px;
	transition: all 0.3s ease;
}

.menu-toggle.active .menu-icon-bar:nth-child(1) {
	transform: translateY(10.5px) rotate(45deg);
}

.menu-toggle.active .menu-icon-bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle.active .menu-icon-bar:nth-child(3) {
	transform: translateY(-10.5px) rotate(-45deg);
}

/* Mobile Navigation (Hidden by default) */
.mobile-navigation {
	display: none;
	background-color: #fff;
	/* Ensure pure white background */
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.4s ease;
	/* Add scroll capability */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mobile-navigation.active {
	display: block;
	max-height: 80vh;
	/* Increase height limit and allow scroll */
	padding: 20px 20px 0 20px;
	/* Reduced bottom padding */
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.mobile-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #fff;
}

.mobile-navigation li {
	border-bottom: 1px solid #f0f0f0;
}

.mobile-navigation li:last-child {
	border-bottom: none;
}

/* Remove extra spacing from last menu item */
.mobile-navigation>ul>li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Mobile Submenu */
.mobile-navigation ul ul {
	display: none;
	/* Initially hidden */
	padding-left: 20px;
	background-color: #f9f9f9;
	/* Revert to gray background */
	border-top: 1px solid #f0f0f0;
	/* Restore border */
	margin-bottom: 0;
	padding-bottom: 0;
}


.mobile-navigation .menu-item-has-children>a {
	position: relative;
	padding-right: 40px;
	/* Space for arrow */
}

/* Arrow Indicator */
.mobile-navigation .menu-item-has-children>a::after {
	content: '';
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	transition: transform 0.3s ease;
}

/* Active State (Open Submenu) */
.mobile-navigation .menu-item-has-children.active>ul {
	display: block;
}

.mobile-navigation .menu-item-has-children.active>a::after {
	transform: translateY(-50%) rotate(180deg);
}

.mobile-navigation ul ul a {
	padding: 10px 0;
	font-size: 1rem;
	font-weight: 500;
	color: inherit;
}

.main-navigation ul li {
	position: relative;
}

.main-navigation ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	min-width: 200px;
	flex-direction: column;
	gap: 0;
	padding: 10px 0;
	border-radius: 8px;
	z-index: 1000;
}

.main-navigation ul li:hover>ul {
	display: flex;
}

.main-navigation ul ul li {
	width: 100%;
}

.main-navigation ul ul a {
	padding: 10px 20px;
	font-size: 0.95rem;
	font-weight: 500;
	color: #444;
	white-space: nowrap;
}

.main-navigation ul ul a:hover {
	background: #f8f9fa;
	color: var(--primary-color);
}

/* Active State for Desktop Menu */
.main-navigation .current-menu-item>a,
.main-navigation .current-menu-parent>a,
.main-navigation .current-menu-ancestor>a {
	color: var(--primary-color);
	font-weight: 800;
}

/* Active State for Desktop Submenu */
.main-navigation ul ul .current-menu-item>a {
	background-color: #f0f7ff;
	color: var(--primary-color);
	font-weight: 700;
}



.mobile-navigation a {
	display: block;
	padding: 15px 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--dark-color);
}

.mobile-navigation a:hover {
	color: var(--primary-color);
}

/* Active State for Mobile Menu */
.mobile-navigation .current-menu-item>a,
.mobile-navigation .current-menu-parent>a,
.mobile-navigation .current-menu-ancestor>a {
	color: var(--primary-color);
	font-weight: 800;
}

.mobile-navigation ul ul .current-menu-item>a {
	background-color: #f0f7ff;
	color: var(--primary-color);
}


/* Hide Cosmosfarm Logout Menu */
.cosmosfarm-members-logout {
	display: none !important;
}

/* Remove border from Account menu (Last visible item) */
.cosmosfarm-members-account {
	border-bottom: none !important;
}


.mobile-secondary-menu {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #eee;
}


.mobile-secondary-menu a {
	font-size: 0.95rem;
	font-weight: 500;
	color: #666;
}

/* Footer Styles - Premium & Responsive */
.site-footer {
	background-color: #111;
	color: #999;
	padding: 80px 0 40px;
	font-size: 0.95rem;
}

.footer-wrapper {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 50px;
}

/* Footer Left (Logo Area) */
.footer-left {
	flex: 0 0 auto;
}

.footer-branding {
	margin-bottom: 20px;
}

.footer-branding .custom-logo-link {
	display: inline-block;
}

.footer-branding .custom-logo-link img,
.footer-branding .custom-logo {
	max-height: 50px;
	width: auto;
	transition: opacity 0.3s;
}

.footer-branding .custom-logo-link:hover img {
	opacity: 0.8;
}

.footer-site-title {
	font-size: 1.8rem;
	font-weight: 800;
	margin: 0;
}

.footer-site-title a {
	color: #fff;
	text-decoration: none;
}

/* Footer Right (Menu & Text) */
.footer-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 30px;
}

/* Footer Menu Widget */
.footer-menu-area .widget ul {
	display: flex;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.footer-menu-area .widget li {
	margin: 0;
}

.footer-menu-area .widget a {
	color: #ccc;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s;
}

.footer-menu-area .widget a:hover {
	color: #fff;
}

.footer-menu-area .widget-title {
	display: none;
	/* Hide widget title for menu usually */
}

/* Footer Text/Info Widget */
.footer-info-area {
	text-align: right;
	line-height: 1.8;
}

.footer-info-area p {
	margin-bottom: 0.5rem;
}

.footer-info-area .widget-title {
	display: none;
	/* Hide if not needed, or style it small */
}

/* Responsive Footer */
@media (max-width: 768px) {
	.site-footer {
		padding: 50px 0;
	}

	.footer-wrapper {
		flex-direction: column;
		align-items: flex-start;
		/* Left align for mobile too? Or center? User asked "good viewing". Left align is cleaner usually. */
		gap: 40px;
	}

	.footer-right {
		align-items: flex-start;
		width: 100%;
	}

	.footer-menu-area .widget ul {
		justify-content: flex-start;
		flex-direction: column;
		gap: 15px;
	}

	.footer-info-area {
		text-align: left;
	}
}

/* =========================================
   Hero Section - Global Enterprise Grade
   Inspired by: Linear, Stripe, Vercel
   ========================================= */
.hero-section {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: #0a0a0f;
	overflow: hidden;
	padding: 90px 0 80px;
}

/* Animated Background */
.hero-background {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.hero-gradient-orb {
	display: none;
}

.orb-1 {
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, #169cee 0%, transparent 70%);
	top: -20%;
	right: -10%;
	animation-delay: 0s;
}

.orb-2 {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, #6366f1 0%, transparent 70%);
	bottom: -15%;
	left: -10%;
	animation-delay: -5s;
}

.orb-3 {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
	top: 40%;
	left: 30%;
	animation-delay: -10s;
}

@keyframes orbFloat {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}

	25% {
		transform: translate(30px, -30px) scale(1.05);
	}

	50% {
		transform: translate(-20px, 20px) scale(0.95);
	}

	75% {
		transform: translate(20px, 10px) scale(1.02);
	}
}

/* Grid Overlay */
.hero-grid-overlay {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse 80% 50% at 50% 50%, black 40%, transparent 100%);
}

/* Hero Container */
.hero-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

/* Hero Content */
.hero-content {
	max-width: 900px;
	text-align: center;
	margin: 0 auto;
}

/* Badge */
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	padding: 14px 28px;
	border-radius: 50px;
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 40px;
	backdrop-filter: blur(10px);
}

.badge-dot {
	width: 8px;
	height: 8px;
	background: #10b981;
	border-radius: 50%;
	animation: pulse 2s infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.5;
		transform: scale(1.2);
	}
}

/* Headline */
.hero-headline {
	font-size: clamp(3rem, 8vw, 5.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -3px;
	margin-bottom: 30px;
}

.headline-row {
	display: block;
	color: #fff;
}

.gradient-text {
	background: linear-gradient(135deg, #169cee 0%, #06b6d4 50%, #a855f7 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Description */
.hero-description {
	font-size: 1.35rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.8;
	max-width: 650px;
	margin: 0 auto 50px;
	letter-spacing: -0.3px;
}

/* CTA Buttons */
.hero-cta-group {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

.btn-hero-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, #169cee 0%, #0d6efd 100%);
	color: #fff;
	padding: 18px 36px;
	border-radius: 12px;
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 10px 40px rgba(22, 156, 238, 0.3);
}

.btn-hero-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 50px rgba(22, 156, 238, 0.4);
}

.btn-hero-primary svg {
	transition: transform 0.3s;
}

.btn-hero-primary:hover svg {
	transform: translateX(5px);
}

.btn-hero-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	padding: 18px 36px;
	border-radius: 12px;
	font-size: 1.1rem;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
}

.btn-hero-secondary:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

/* Feature Cards Grid */
.hero-features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: 1000px;
	margin: 0 auto;
}

.feature-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 20px;
	padding: 32px 24px;
	text-align: center;
	backdrop-filter: blur(20px);
	transition: all 0.4s ease;
}

.feature-card:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
	transform: translateY(-8px);
}

.feature-icon {
	font-size: 2.5rem;
	margin-bottom: 16px;
}

.feature-card h3 {
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.feature-card p {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.9rem;
	margin: 0;
}

/* Hero Responsive */
@media (max-width: 991px) {
	.hero-features {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.hero-section {
		padding: 100px 0 80px;
		min-height: auto;
		align-items: flex-start;
	}

	.hero-container {
		gap: 50px;
	}

	.hero-headline {
		letter-spacing: -2px;
	}

	.hero-description {
		font-size: 1.1rem;
		margin-bottom: 35px;
	}

	.hero-features {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		width: 100%;
	}

	.feature-card {
		padding: 20px 14px;
	}

	.feature-icon {
		font-size: 2rem;
		margin-bottom: 10px;
	}

	.feature-card h3 {
		font-size: 0.95rem;
		margin-bottom: 4px;
	}

	.feature-card p {
		font-size: 0.8rem;
	}

	.hero-cta-group {
		flex-direction: column;
		align-items: center;
	}

	.btn-hero-primary,
	.btn-hero-secondary {
		width: 100%;
		max-width: 300px;
		justify-content: center;
		padding: 16px 28px;
	}

	.hero-badge {
		font-size: 0.8rem;
		padding: 8px 16px;
		margin-bottom: 30px;
	}
}

.slogan-item:hover::after {
	opacity: 1;
}

.slogan-item h3 {
	font-size: 2.2rem;
	color: var(--primary-color);
	margin-bottom: 0.8rem;
	font-weight: 800;
	letter-spacing: -1px;
}

.slogan-item p {
	font-size: 1.05rem;
	color: #666;
	line-height: 1.6;
	margin: 0;
	word-break: keep-all;
}

/* Special styling for 'Together' card to make it standout if desired, 
   but user wants clean look, so keeping consistent style is safe. 
   Highlight class removed or reset to match others for uniformity 
   unless distinct color requested. Let's keep it clean but maybe a subtle tint. */
.slogan-item.highlight {
	background: linear-gradient(135deg, #169cee 0%, #1280c4 100%);
	color: #fff;
}

.slogan-item.highlight h3 {
	color: #fff;
}

.slogan-item.highlight p {
	color: rgba(255, 255, 255, 0.9);
}

.slogan-item.highlight::after {
	display: none;
}

.slogan-main-message {
	grid-column: 1 / -1;
	text-align: center;
	font-size: 2rem;
	margin: 3rem 0 1rem;
	color: #333;
	font-weight: 700;
	animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.slogan-main-message strong {
	color: var(--primary-color);
	position: relative;
	display: inline-block;
}

.hero-cta {
	animation: fadeInUp 0.8s ease-out 0.8s backwards;
}

.hero-cta .btn-primary {
	padding: 1.2rem 3rem;
	font-size: 1.4rem;
	box-shadow: 0 10px 25px rgba(22, 156, 238, 0.4);
}

.hero-cta .btn-primary:hover {
	box-shadow: 0 15px 35px rgba(22, 156, 238, 0.6);
	transform: translateY(-3px);
}

/* Animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

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

/* =========================================
   Global Premium Tweaks
   ========================================= */
.section-padding {
	padding: 120px 0;
	/* Consistent larger padding */
}

/* Typography refinements */
.section-title {
	font-size: 3rem;
	color: #111;
	margin-bottom: 1.5rem;
	font-weight: 800;
	letter-spacing: -1px;
	position: relative;
	display: inline-block;
}

.section-title::after {
	content: '';
	display: block;
	width: 60px;
	height: 4px;
	background: var(--primary-color);
	margin: 20px auto 0;
	border-radius: 2px;
}

.text-left .section-title::after {
	margin-left: 0;
}

.section-title small {
	display: block;
	/* Section subtitle on new line usually looks better or cleaner inline flow */
	font-size: 1.1rem;
	color: var(--primary-color);
	margin-top: 0.5rem;
	margin-left: 0;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.section-desc {
	font-size: 1.2rem;
	color: #666;
	max-width: 700px;
	margin: 0 auto 4rem;
	line-height: 1.6;
}

/* =========================================
   News Section (Premium & Clean)
   ========================================= */
.news-section {
	background-color: #ffffff;
	position: relative;
}

/* Decorative background element */
.news-section::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 30%;
	height: 100%;
	background: #f8fbff;
	z-index: 0;
}

.news-section .container {
	position: relative;
	z-index: 1;
}

.news-box {
	background: #fff;
	border-radius: 20px;
	padding: 3.5rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.03);
	transition: transform 0.3s ease;
}

.news-box:hover {
	transform: translateY(-5px);
}

.section-header-row {
	border-bottom: 2px solid #f0f0f0;
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
	align-items: center;
}

.post-list li {
	padding: 1.5rem 0;
	border-bottom: 1px dashed #e0e0e0;
}

.post-title {
	font-size: 1.15rem;
	font-weight: 600;
	color: #2c3e50;
	transition: color 0.2s;
}

.post-list li:hover .post-title {
	color: var(--primary-color);
	padding-left: 5px;
	/* Subtle movement */
}

/* =========================================
   Promotion Section - Global Enterprise Style
   ========================================= */
.promotion-section {
	position: relative;
	padding: 120px 0;
	background: #0f172a;
	overflow: hidden;
}

.promo-background {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.promo-gradient {
	display: none;
}

.promotion-section .container {
	position: relative;
	z-index: 1;
}

/* Promo Header */
.promo-header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 80px;
}

.promo-label {
	display: inline-block;
	background: rgba(22, 156, 238, 0.15);
	color: #169cee;
	padding: 10px 24px;
	border-radius: 50px;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 30px;
}

.promo-headline {
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -2px;
	margin-bottom: 24px;
}

.gradient-highlight {
	background: linear-gradient(135deg, #169cee 0%, #06b6d4 50%, #a855f7 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.promo-desc {
	font-size: 1.25rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.7;
}

/* Promo Cards */
.promo-cards-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	max-width: 900px;
	margin: 0 auto 80px;
}

.promo-card-new {
	position: relative;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;
	padding: 40px 32px;
	backdrop-filter: blur(20px);
	transition: all 0.4s ease;
}

.promo-card-new:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.15);
	transform: translateY(-10px);
}

.member-card {
	border-color: rgba(22, 156, 238, 0.3);
}

.card-badge {
	position: absolute;
	top: 20px;
	right: 20px;
	background: linear-gradient(135deg, #169cee 0%, #0d6efd 100%);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 20px;
}

.card-icon {
	font-size: 3.5rem;
	margin-bottom: 24px;
}

.card-title {
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 16px;
}

.card-desc {
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.15rem;
	line-height: 1.7;
	margin-bottom: 32px;
}

.card-features {
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
}

.card-features li {
	display: flex;
	align-items: center;
	gap: 14px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.1rem;
	font-weight: 500;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.card-features li:last-child {
	border-bottom: none;
}

.card-features svg {
	color: #10b981;
	flex-shrink: 0;
}

.promo-card-new .card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.deadline {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.85rem;
}

.card-cta {
	color: #169cee;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s;
}

.card-cta:hover {
	color: #fff;
}

.card-cta.secondary {
	color: rgba(255, 255, 255, 0.7);
}

.card-cta.secondary:hover {
	color: #fff;
}

/* Promo CTA Section */
.promo-cta-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(135deg, rgba(22, 156, 238, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 40px 50px;
	max-width: 900px;
	margin: 0 auto;
}

.cta-content h3 {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.cta-content p {
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

.btn-promo-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, #169cee 0%, #0d6efd 100%);
	color: #fff;
	padding: 16px 32px;
	border-radius: 12px;
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 10px 30px rgba(22, 156, 238, 0.3);
}

.btn-promo-cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(22, 156, 238, 0.4);
}

.btn-promo-cta svg {
	transition: transform 0.3s;
}

.btn-promo-cta:hover svg {
	transform: translateX(5px);
}

/* Promo Responsive */
@media (max-width: 768px) {
	.promotion-section {
		padding: 80px 0;
	}

	.promo-cards-wrapper {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.promo-card-new {
		padding: 30px 24px;
	}

	.promo-cta-section {
		flex-direction: column;
		text-align: center;
		gap: 30px;
		padding: 30px;
	}

	.btn-promo-cta {
		width: 100%;
		justify-content: center;
	}
}

/* =========================================
   Guide Section (Premium Timeline Design)
   ========================================= */
.guide-section {
	background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
	padding: 140px 0;
}

.section-badge {
	display: inline-block;
	background: linear-gradient(135deg, var(--primary-color), #64b5f6);
	color: #fff;
	padding: 8px 24px;
	border-radius: 50px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 1.5rem;
}

.premium-title {
	font-size: 3.5rem;
	font-weight: 800;
	color: #1a1a2e;
	margin-bottom: 1rem;
	letter-spacing: -2px;
}

.premium-subtitle {
	font-size: 1.3rem;
	color: #666;
	margin-bottom: 0;
}

/* Timeline Container */
.process-timeline {
	position: relative;
	max-width: 900px;
	margin: 80px auto 0;
}

/* Vertical Line */
.timeline-line {
	position: absolute;
	left: 50px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--primary-color) 0%, #64b5f6 100%);
	border-radius: 3px;
}

/* Each Step */
.process-step {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	margin-bottom: 50px;
	position: relative;
}

.process-step:last-child {
	margin-bottom: 0;
}

/* Step Icon */
.step-icon {
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	background: #fff;
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 15px 40px rgba(22, 156, 238, 0.15);
	position: relative;
	z-index: 2;
	border: 2px solid rgba(22, 156, 238, 0.1);
	transition: all 0.4s ease;
}

.process-step:hover .step-icon {
	transform: scale(1.1);
	box-shadow: 0 20px 50px rgba(22, 156, 238, 0.25);
}

.step-number {
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--primary-color);
	letter-spacing: 1px;
	margin-bottom: 5px;
}

.step-icon svg {
	color: var(--primary-color);
}

/* Step Content */
.step-content {
	flex: 1;
	background: #fff;
	padding: 35px 40px;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.03);
	transition: all 0.3s ease;
}

.process-step:hover .step-content {
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
	transform: translateX(10px);
}

.step-content h3 {
	font-size: 1.5rem;
	font-weight: 800;
	color: #1a1a2e;
	margin-bottom: 1rem;
	letter-spacing: -0.5px;
}

.step-content p {
	font-size: 1.1rem;
	color: #666;
	line-height: 1.7;
	margin-bottom: 0;
}

.step-note {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.9rem;
	color: var(--primary-color);
	font-weight: 500;
}

.step-complete {
	display: inline-block;
	margin-top: 1rem;
	background: linear-gradient(135deg, #10b981, #34d399);
	color: #fff;
	padding: 8px 16px;
	border-radius: 50px;
	font-size: 0.9rem;
	font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
	.timeline-line {
		left: 25px;
	}

	.step-icon {
		width: 50px;
		height: 50px;
		border-radius: 12px;
	}

	.step-icon svg {
		width: 20px;
		height: 20px;
	}

	.step-number {
		font-size: 0.6rem;
	}

	.process-step {
		gap: 20px;
	}

	.step-content {
		padding: 25px;
	}

	.step-content h3 {
		font-size: 1.2rem;
	}

	.premium-title {
		font-size: 2.5rem;
	}
}

.step-item h3 {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.step-item p {
	color: rgba(255, 255, 255, 0.7);
}

/* FAQ Section */
.faq-section {
	background-color: #fff;
}

.faq-list {
	margin-top: 4rem;
}

.faq-item {
	border: none;
	border-radius: 16px;
	padding: 2.5rem;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.03);
	margin-bottom: 2rem;
	background: #fff;
	border-left: 5px solid transparent;
	transition: all 0.3s ease;
}

.faq-item:hover {
	border-left-color: var(--primary-color);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
	transform: translateX(5px);
}

.faq-item h3 {
	font-size: 1.4rem;
	margin-bottom: 0.8rem;
	cursor: pointer;
	color: #2c3e50;
}

.faq-item h3::before {
	content: "Q. ";
	color: var(--primary-color);
	font-weight: 800;
}


.faq-item .meta {
	font-size: 0.95rem;
	color: #aaa;
	margin-top: 1rem;
	font-style: italic;
	padding-top: 1rem;
	border-top: 1px solid #f5f5f5;
}

.step-item h3 {
	color: #fff;
	font-size: 1.4rem;
	margin-bottom: 1.2rem;
}

.step-item p {
	color: #ddd;
	font-size: 1.05rem;
	line-height: 1.6;
}

.step-item .note {
	display: block;
	margin-top: 1.2rem;
	font-size: 0.9rem;
	color: #64b5f6;
	/* Lighter Blue for dark bg */
	font-style: italic;
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3 {
	color: #fff;
}

/* FAQ Section Cleanup */
.faq-list {
	max-width: 1000px;
	margin: 0 auto;
}

/* =========================================
   Responsive Grid Fixes & Alignments
   ========================================= */

/* Fix Slogan Grid */
.slogan-grid.two-column {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Force 2 columns */
	gap: 30px;
	max-width: 900px;
	margin: 0 auto 5rem;
}

/* =========================================
   Service Section (Premium Design)
   ========================================= */
.service-section {
	position: relative;
}

.service-section::before,
.service-section::after {
	display: none;
}

.service-section .container {
	position: relative;
	z-index: 1;
}

.service-section .section-title {
	font-size: 3.5rem;
	letter-spacing: -2px;
	margin-bottom: 1rem;
}

.service-section .section-title small {
	font-size: 1rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--primary-color);
	font-weight: 700;
}

.service-section .section-desc {
	font-size: 1.25rem;
	color: #666;
	max-width: 600px;
	margin: 0 auto 5rem;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 60px;
}

.service-item {
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
	transition: all 0.4s ease;
	border: 1px solid rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
}

.service-item:hover {
	transform: translateY(-10px);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
	border-color: rgba(22, 156, 238, 0.2);
}

.service-thumb {
	height: 180px;
	overflow: hidden;
	position: relative;
	background: #f0f7ff;
}

.service-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.service-item:hover .service-thumb img {
	transform: scale(1.1);
}

.service-content {
	padding: 30px 24px;
	text-align: left;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.service-content h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 12px;
}

.service-content p {
	font-size: 0.95rem;
	color: #64748b;
	line-height: 1.6;
	margin: 0;
}

/* Fix Promo Grid */
.promo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 2 items per row */
	gap: 3rem;
}

/* Fix News Layout */
.container-flex {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}

.news-box {
	flex: 1;
	/* Equal width */
	width: 48%;
	/* Fallback */
}

/* =========================================
   FAQ Section - Premium Help Center Style
   ========================================= */
.faq-section {
	background-color: #f9fafb;
	padding: 120px 0;
}

.faq-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	max-width: 1100px;
	margin: 60px auto 0;
	text-align: left;
}

.faq-card {
	background: #fff;
	border-radius: 16px;
	padding: 35px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 10px 15px rgba(0, 0, 0, 0.03);
	border: 1px solid rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
	height: 100%;
}

.faq-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.02);
	border-color: rgba(22, 156, 238, 0.2);
}

.faq-header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 16px;
}

.faq-q-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background: rgba(22, 156, 238, 0.1);
	color: #169cee;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1rem;
}

.faq-header h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1a1a2e;
	line-height: 1.4;
	margin: 0;
	padding-top: 2px;
}

.faq-body {
	padding-left: 48px;
	/* Align with text start (32px icon + 16px gap) */
}

.faq-body p,
.faq-body li {
	color: #64748b;
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0;
}

.faq-body strong {
	color: #334155;
}



/* =========================================
   Guide Section - Vertical Process Style
   ========================================= */
.guide-section {
	padding: 120px 0;
	background: #f9fafb !important;
	background-image: none !important;
}

.process-grid {
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: 850px;
	margin: 60px auto 0;
}

/* Ensure arrows from previous cards visually overlap the next card */
.process-card:nth-child(1) {
	z-index: 4;
}

.process-card:nth-child(2) {
	z-index: 3;
}

.process-card:nth-child(3) {
	z-index: 2;
}

.process-card:nth-child(4) {
	z-index: 1;
}

.process-card {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	background: #fff;
	border-radius: 20px;
	padding: 35px 40px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
	border: 1px solid rgba(0, 0, 0, 0.05);
	position: relative;
	transition: transform 0.3s;
}

.process-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
	border-color: rgba(22, 156, 238, 0.2);
}

.process-header {
	flex-shrink: 0;
	margin-bottom: 0;
	position: relative;
}

.process-number {
	position: absolute;
	top: -20px;
	left: -20px;
	width: 45px;
	height: 45px;
	background: linear-gradient(135deg, #169cee, #0d6efd);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-shadow: 0 5px 15px rgba(22, 156, 238, 0.3);
	border: 3px solid #fff;
	z-index: 10;
	transform: none;
}

.process-icon-box {
	width: 60px;
	height: 60px;
	background: #f0f7ff;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #169cee;
	position: relative;
	z-index: 1;
}

.process-content {
	flex: 1;
	padding-top: 5px;
}

.process-content h3 {
	font-size: 1.35rem;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 10px;
}

.process-content p {
	font-size: 1rem;
	color: #64748b;
	line-height: 1.6;
	margin: 0;
}

.process-note {
	font-size: 0.85rem;
	color: #94a3b8;
	display: block;
	margin-top: 8px;
}

.process-complete {
	font-size: 0.95rem;
	color: #169cee;
	font-weight: 700;
	display: block;
	margin-top: 8px;
}

/* Connecting Arrow (Line + Arrowhead) */
.process-card:not(:last-child)::after {
	content: '';
	position: absolute;
	bottom: -50px;
	left: 50%;
	width: 3px;
	height: 50px;
	background: #169cee;
	transform: translateX(-50%);
	z-index: 0;
}

.process-card:not(:last-child)::before {
	content: '';
	position: absolute;
	bottom: -56px;
	left: 50%;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 10px solid #169cee;
	transform: translateX(-50%);
	z-index: 1;
}

/* Mobile Responsive for Process */
@media (max-width: 768px) {
	.process-card {
		flex-direction: column;
		padding: 30px;
		text-align: center;
		gap: 20px;
		align-items: center;
	}

	.process-header {
		margin: 0 auto;
	}

	.process-content {
		padding-top: 0;
	}

	.process-number {
		/* Position at top-left corner of card */
		top: -12px;
		left: -8px;
		width: 36px;
		height: 36px;
		font-size: 0.9rem;
	}

	/* Adjust Arrow Position on Mobile */
	.process-card:not(:last-child)::after,
	.process-card:not(:last-child)::before {
		left: 50%;
		/* Center arrow */
	}
}

.faq-body ol {
	margin: 0;
	padding-left: 20px;
}

/* =========================================
   News Section - Dashboard Style
   ========================================= */
.news-section {
	padding: 100px 0;
	background: #fff !important;
	background-image: none !important;
	position: relative;
	z-index: 10;
	width: 100%;
	overflow: hidden;
}

.news-section::before,
.news-section::after {
	display: none !important;
	content: none !important;
}

.news-dashboard {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
}

.news-card {
	background: #fff;
	border-radius: 24px;
	padding: 40px;
	border: 1px solid #eee;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
	transition: all 0.3s ease;
}

.news-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
	border-color: rgba(22, 156, 238, 0.2);
}

.news-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 2px solid #f8f9fa;
}

.news-card-header h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.5rem;
	font-weight: 800;
	color: #1a1a2e;
	margin: 0;
}

.header-icon {
	font-size: 1.6rem;
}

.badge-member {
	background: #ffebee;
	color: #ef5350;
	font-size: 0.75rem;
	padding: 4px 10px;
	border-radius: 20px;
	vertical-align: middle;
	margin-left: 8px;
	font-weight: 700;
}

.view-more-link {
	font-size: 0.95rem;
	color: #666;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.3s;
}

.view-more-link:hover {
	color: var(--primary-color);
}

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

.news-list li {
	margin-bottom: 15px;
}

.news-list li:last-child {
	margin-bottom: 0;
}

.news-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-radius: 12px;
	background: #fcfcfc;
	text-decoration: none;
	transition: all 0.2s;
}

.news-link:hover {
	background: #f0f7ff;
}

.news-title {
	font-size: 1.05rem;
	color: #333;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 70%;
}

.news-date {
	font-size: 0.85rem;
	color: #999;
}

/* Section Title Alignment Utilities */
.text-center .section-title {
	margin-left: auto;
	margin-right: auto;
}

.text-center .section-desc {
	margin-left: auto;
	margin-right: auto;
}

.guide-section {
	text-align: center;
}

.process-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 4 steps in a row */
	gap: 25px;
	margin-top: 5rem;
	text-align: left;
}

/* Header Responsive (Mobile Menu) - Pure CSS Approach */
/* Hide Checkbox */
#menu-toggle {
	display: none;
}

/* Hamburger Icon */
.menu-icon {
	display: none;
	cursor: pointer;
	font-size: 1.8rem;
	color: var(--primary-color);
	padding: 10px;
}

/* Mobile Responsive Media Queries */
@media (max-width: 991px) {

	/* Section Grids -> 2 Columns */
	.service-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.process-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {

	/* Mobile Header Layout */
	.site-header {
		padding: 0;
		/* Remove padding from header wrapper */
	}

	.header-container {
		flex-wrap: nowrap;
		padding: 15px 20px;
		/* Add padding to container instead */
		justify-content: space-between;
	}

	.site-branding {
		flex: 0 0 auto;
	}

	/* Hide Desktop Navigation on Mobile */
	.main-navigation,
	.top-navigation {
		display: none !important;
	}

	/* Show Mobile Menu Toggle */
	.menu-toggle {
		display: flex;
	}

	/* Grids to 1 Column */
	.slogan-grid.two-column,
	.promo-grid,
	.process-steps,
	.faq-grid,
	.news-dashboard {
		grid-template-columns: 1fr;
	}

	.news-card {
		padding: 20px !important;
		max-width: 100%;
		overflow: hidden;
	}

	.news-section .container {
		padding-left: 12px;
		padding-right: 12px;
		max-width: 100%;
		overflow-x: hidden;
	}

	.news-title {
		max-width: 60%;
		font-size: 0.9rem;
	}

	/* Service Grid: 1 column on mobile */
	.service-section .container {
		padding-left: 15px;
		padding-right: 15px;
	}

	.service-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	.service-item {
		padding: 25px !important;
	}

	.container-flex {
		flex-direction: column;
		gap: 20px;
	}

	.news-box {
		width: 100%;
	}

	/* Typography */
	.main-title {
		font-size: 2.2rem;
	}

	/* Optimize Section Padding */
	.hero-section,
	.news-section,
	.guide-section,
	.faq-section,
	.promotion-section {
		padding: 60px 0 !important;
	}

	/* Remove Section Gradients on Mobile */
	.promotion-section {
		background: #0f172a !important;
		/* Dark solid */
		background-image: none !important;
	}

	.promo-gradient {
		display: none !important;
	}



	/* Remove Glass/Gradient effects from Cards on Mobile */
	.feature-card,
	.promo-card-new {
		background: #1e293b !important;
		/* Solid Dark */
		backdrop-filter: none !important;
		background-image: none !important;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

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

	.section-padding {
		padding: 80px 0;
	}

	.cta-banner {
		padding: 3rem 2rem;
		border-radius: 20px;
	}

	.cta-banner h3 {
		font-size: 2rem;
	}

	.cta-banner p {
		font-size: 1.1rem;
	}
}

/* Membership Page Styles */
.membership-hero {
	background-color: var(--primary-color);
	color: #fff;
	padding: 80px 0;
	text-align: center;
	margin-bottom: 60px;
}

.membership-hero h1 {
	font-size: 2.5rem;
	margin-bottom: 20px;
	color: #fff;
}

.membership-hero p {
	font-size: 1.2rem;
	opacity: 0.9;
	max-width: 700px;
	margin: 0 auto;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 80px;
}

.service-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 20px;
	padding: 40px 30px;
	text-align: center;
	transition: all 0.3s ease;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.service-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
	border-color: var(--primary-color);
}

.service-icon {
	width: 80px;
	height: 80px;
	background: var(--light-bg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
	font-size: 2rem;
	color: var(--primary-color);
	transition: all 0.3s ease;
}

.service-card:hover .service-icon {
	background: var(--primary-color);
	color: #fff;
}

.service-title {
	font-size: 1.5rem;
	margin-bottom: 15px;
	color: var(--heading-color);
}

.service-desc {
	color: #666;
	margin-bottom: 30px;
	font-size: 1rem;
	line-height: 1.6;
}

.service-action {
	margin-top: auto;
	width: 100%;
}

.btn-access {
	background-color: var(--primary-color);
	color: #fff;
	width: 100%;
	display: block;
	padding: 12px;
	border-radius: 10px;
	font-weight: 700;
	border: none;
	cursor: pointer;
}

.btn-signup {
	background-color: #334155;
	color: #fff;
	width: 100%;
	display: block;
	padding: 12px;
	border-radius: 10px;
	font-weight: 700;
	border: none;
	cursor: pointer;
}

.btn-access:hover {
	background-color: #0d6efd;
	transform: translateY(-2px);
}

.btn-signup:hover {
	background-color: #1e293b;
	transform: translateY(-2px);
}

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

@media (max-width: 768px) {
	.services-grid {
		grid-template-columns: 1fr;
	}

	.membership-hero {
		padding: 60px 0;
	}

	.membership-hero h1 {
		font-size: 2rem;
	}
}

/* Service Detail Page Styles */
.service-header {
	background-color: #0f172a;
	color: #fff;
	padding: 80px 0;
	position: relative;
	overflow: hidden;
}

.service-header::before {
	display: none;
}

.service-header .container {
	position: relative;
	z-index: 1;
}

.service-header h1 {
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 20px;
	color: #fff;
}

.service-header-desc {
	font-size: 1.25rem;
	color: #94a3b8;
	max-width: 700px;
	line-height: 1.6;
}

.service-crumb {
	display: inline-block;
	background: rgba(255, 255, 255, 0.1);
	padding: 8px 16px;
	border-radius: 30px;
	font-size: 0.9rem;
	color: #fff;
	margin-bottom: 25px;
	backdrop-filter: blur(5px);
}

.service-body {
	padding: 100px 0;
}

.service-section-title {
	font-size: 2rem;
	margin-bottom: 40px;
	position: relative;
	padding-left: 20px;
}

.service-section-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 5px;
	bottom: 5px;
	width: 5px;
	background: var(--primary-color);
	border-radius: 5px;
}

.service-feature-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin-top: 40px;
	padding: 20px;
}

.s-feature-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.s-feature-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	background: #f1f5f9;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
}

.s-feature-icon svg {
	width: 26px;
	height: 26px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}

.s-feature-content h4 {
	font-size: 1.25rem;
	margin-bottom: 10px;
}

.s-feature-content p {
	color: #64748b;
	line-height: 1.6;
}

.service-cta-box {
	background: #1e293b;
	border-radius: 20px;
	padding: 60px;
	text-align: center;
	color: #fff;
	margin-top: 100px;
}

.service-cta-box h2 {
	color: #fff;
	margin-bottom: 20px;
}

.service-cta-box p {
	color: #94a3b8;
	margin-bottom: 40px;
	font-size: 1.1rem;
}

@media (max-width: 768px) {
	.service-feature-list {
		grid-template-columns: 1fr;
	}

	.service-header h1 {
		font-size: 2.2rem;
	}

	.service-cta-box {
		padding: 40px 20px;
	}
}

/* Board Page Layout (Community/Support) */
.board-page-wrapper {
	padding: 80px 0 120px;
	background-color: #fff;
	min-height: 80vh;
}

.board-page-header {
	margin-bottom: 60px;
	text-align: left;
	border-bottom: 2px solid #222;
	padding-bottom: 20px;
}

.board-page-header .page-title {
	font-size: 2.2rem;
	font-weight: 800;
	color: #111;
	margin-bottom: 0;
}

.board-page-header .page-desc {
	margin-top: 10px;
	color: #666;
	font-size: 1.1rem;
}

.board-content-area {
	width: 100%;
	/* Ensure kboard fits well */
}

/* KBoard Custom Overrides (Optional to match theme) */
#kboard-default-list .kboard-list header {
	background-color: #f9f9f9 !important;
	border-top: 2px solid #333 !important;
}

/* MODERN MEMBERSHIP LANDING STYLES (Clean & Approachable) */
.modern-membership {
	background-color: #fff;
	color: #333;
	overflow: hidden;
}

.container {
	position: relative;
	/* Ensure z-index works */
}

/* 1. Hero Section */
.modern-hero {
	position: relative;
	padding: 100px 0 120px;
	text-align: center;
	background: #fff;
}

.hero-bg-decoration {
	position: absolute;
	top: -50%;
	left: 50%;
	transform: translateX(-50%);
	width: 1200px;
	height: 1000px;
	background: radial-gradient(circle, rgba(22, 156, 238, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
	z-index: 0;
	pointer-events: none;
}

.hero-badge {
	display: inline-block;
	background: #fff;
	color: #169cee;
	border: 1px solid #e0f2fe;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
	padding: 8px 16px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: 24px;
	animation: fadeInDown 0.8s ease-out;
}

.hero-title {
	font-size: 4rem;
	font-weight: 800;
	line-height: 1.2;
	color: #111;
	margin-bottom: 24px;
	letter-spacing: -0.02em;
	animation: fadeInUp 0.8s ease-out 0.2s both;
}

.text-gradient {
	color: #169cee;
}

.hero-subtitle {
	font-size: 1.3rem;
	line-height: 1.7;
	color: #555;
	margin-bottom: 40px;
	animation: fadeInUp 0.8s ease-out 0.4s both;
}

.hero-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	animation: fadeInUp 0.8s ease-out 0.6s both;
}

.btn-main-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #169cee;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
	padding: 20px 48px;
	border-radius: 60px;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(22, 156, 238, 0.3);
	transition: all 0.3s ease;
}

.btn-main-cta:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 15px 40px rgba(22, 156, 238, 0.4);
	color: #fff;
	background: #0ea5e9;
}

.hero-guarantee {
	font-size: 0.95rem;
	color: #888;
	margin: 0;
}

.hero-social-proof {
	margin-top: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	animation: fadeIn 1s ease-out 0.8s both;
}

.avatar-circles {
	display: flex;
}

.avatar-circles span {
	width: 36px;
	height: 36px;
	background-color: #eee;
	border: 3px solid #fff;
	border-radius: 50%;
	margin-left: -12px;
	background-size: cover;
	background-position: center;
	background-image: url('https://placehold.co/40');
	/* Fallback placeholder */
}

.avatar-circles span:nth-child(1) {
	background-color: #cbd5e1;
	z-index: 4;
}

.avatar-circles span:nth-child(2) {
	background-color: #94a3b8;
	z-index: 3;
}

.avatar-circles span:nth-child(3) {
	background-color: #64748b;
	z-index: 2;
}

.avatar-circles span:nth-child(4) {
	background-color: #475569;
	z-index: 1;
}

.proof-text {
	font-size: 1rem;
	color: #444;
}

/* 2. Value Cards Section */
.modern-section {
	padding: 100px 0;
}

.section-gray {
	background-color: #f8fafc;
}

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

.section-header h2 {
	font-size: 2.5rem;
	font-weight: 800;
	color: #111;
	margin-bottom: 16px;
}

.highlight-marker {
	position: relative;
	z-index: 1;
}

.highlight-marker::after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 0;
	width: 100%;
	height: 12px;
	background: #ffe066;
	z-index: -1;
	opacity: 0.6;
	border-radius: 4px;
}

.section-header p {
	font-size: 1.2rem;
	color: #666;
}

.value-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.v-card {
	background: #fff;
	border-radius: 24px;
	padding: 40px 32px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
	transition: all 0.3s ease;
	border: 1px solid transparent;
}

.v-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
	border-color: #e0f2fe;
}

.v-icon {
	font-size: 3rem;
	margin-bottom: 24px;
	display: inline-block;
	padding: 16px;
	background: #f0f9ff;
	border-radius: 20px;
}

.v-content h3 {
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 12px;
	color: #1e293b;
}

.v-content p {
	font-size: 1.05rem;
	color: #64748b;
	line-height: 1.6;
}

/* 3. Benefit Comparison */
.benefit-box {
	max-width: 800px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 30px;
	padding: 60px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.04);
}

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

.benefit-header h2 {
	font-size: 2rem;
	font-weight: 800;
	color: #111;
	margin-bottom: 10px;
}

.benefit-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.b-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-radius: 12px;
	transition: background 0.2s;
}

.b-item:hover {
	background: #f8fafc;
}

.b-item.highlight {
	background: #f0f9ff;
	border: 1px solid #bae6fd;
}

.check-icon {
	color: #0ea5e9;
	font-weight: 800;
	font-size: 1.2rem;
}

.b-text {
	font-size: 1.15rem;
	color: #333;
}

/* 4. Final CTA */
.modern-cta-section {
	padding-bottom: 120px;
}

.final-cta-card {
	background: #2563eb;
	border-radius: 32px;
	padding: 80px 40px;
	text-align: center;
	color: #fff;
	box-shadow: 0 30px 60px rgba(37, 99, 235, 0.3);
	position: relative;
	overflow: hidden;
	max-width: 1000px;
	margin: 0 auto;
}

.final-cta-card::before {
	display: none;
}

.cta-badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(4px);
	padding: 8px 16px;
	border-radius: 50px;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 24px;
	color: #fff;
}

.final-cta-card h2 {
	font-size: 2.8rem;
	font-weight: 800;
	margin-bottom: 30px;
	line-height: 1.25;
	color: #fff;
}

.price-display {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-bottom: 40px;
}

.original-price {
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: line-through;
}

.fle-arrow {
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.6);
}

.final-price {
	font-size: 2.5rem;
	font-weight: 900;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.btn-final-cta {
	display: inline-block;
	background: #fff;
	color: #2563eb;
	font-size: 1.4rem;
	font-weight: 800;
	padding: 24px 60px;
	border-radius: 60px;
	text-decoration: none;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}

.btn-final-cta:hover {
	transform: translateY(-4px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
	color: #1e40af;
}

.cta-sub {
	margin-top: 20px;
	opacity: 0.8;
	font-size: 1rem;
}

/* Animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

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

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

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

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Responsive */
@media (max-width: 991px) {
	.value-cards {
		grid-template-columns: 1fr;
	}

	.hero-title {
		font-size: 3rem;
	}
}

@media (max-width: 768px) {
	.modern-hero {
		padding: 60px 0 80px;
	}

	.hero-title {
		font-size: 2.2rem;
	}

	.modern-section {
		padding: 60px 0;
	}

	.benefit-box {
		padding: 30px;
	}

	.final-cta-card {
		padding: 50px 24px;
		border-radius: 24px;
	}

	.final-cta-card h2 {
		font-size: 2rem;
	}

	.final-price {
		font-size: 2rem;
	}

	.btn-final-cta {
		width: 100%;
		padding: 20px;
		font-size: 1.2rem;
	}

	.pc-only {
		display: none;
	}

	.mobile-only {
		display: block;
	}
}

@media (min-width: 769px) {
	.mobile-only {
		display: none;
	}
}

/* Generic Page Layout Fix */
#primary.site-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
	width: 100%;
}

/* KBoard 댓글 입력폼 상하 여백 일관성 수정 */
.kboard-comments-default .comments-field.field-content {
	margin-bottom: 0;
	margin-top: 0;
}

.kboard-comments-default .kboard-comments-write {
	padding: 16px 0;
}

/* Scroll Alignment Fix for Sticky Header */
#modern-membership {
	scroll-margin-top: 83px;
	/* Default large offset */
}

@media (max-width: 768px) {
	#modern-membership {
		scroll-margin-top: 80px;
		/* Mobile specific offset */
	}
}

/* =========================================
   Service Navigation Section
   ========================================= */
.service-navigation-section {
	padding: 0 0 100px;
	background: transparent;
}

.service-nav-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: #333;
	margin-bottom: 2.5rem;
	text-align: center;
}

.service-nav-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	background-color: #f8f9fa;
	padding: 60px;
	border-radius: 20px;
}

@media (min-width: 768px) {
	.service-nav-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

@media (max-width: 768px) {
	.service-nav-grid {
		padding: 40px 20px;
	}
}

.btn-service-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 10px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	color: #4a5568;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	text-align: center;
	line-height: 1.3;
}

.btn-service-nav:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border-color: var(--primary-color, #169cee);
	color: var(--primary-color, #169cee);
	background: #fff;
}

.btn-service-nav.current {
	background: var(--primary-color, #169cee);
	color: #fff;
	border-color: var(--primary-color, #169cee);
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(22, 156, 238, 0.3);
	pointer-events: none;
}