/*
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);
}

/* 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;
	border-top: 1px solid #eee;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.4s ease;
}

.mobile-navigation.active {
	display: block;
	max-height: 500px;
	padding: 20px;
}

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

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

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

.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);
}

.mobile-secondary-menu {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 2px 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 {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.6;
	animation: orbFloat 20s ease-in-out infinite;
}

.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: linear-gradient(180deg, #0a0a0f 0%, #0f172a 100%);
	overflow: hidden;
}

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

.promo-gradient {
	position: absolute;
	top: 0;
	right: 0;
	width: 60%;
	height: 100%;
	background: radial-gradient(ellipse at top right, rgba(22, 156, 238, 0.15) 0%, transparent 60%);
}

.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 (World-Class Premium Design)
   ========================================= */
.service-section {
	background: linear-gradient(180deg, #f8fbff 0%, #ffffff 50%, #f0f7ff 100%);
	position: relative;
	overflow: hidden;
}

.service-section::before {
	content: '';
	position: absolute;
	top: 10%;
	right: -200px;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(22, 156, 238, 0.05) 0%, transparent 70%);
	border-radius: 50%;
}

.service-section::after {
	content: '';
	position: absolute;
	bottom: 10%;
	left: -150px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(22, 156, 238, 0.03) 0%, transparent 70%);
	border-radius: 50%;
}

.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 Section - Global Enterprise Style */
.service-section {
	padding: 140px 0;
	background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
}

.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 {
		top: -15px;
		left: 20px;
		/* Keep at left corner */
	}

	/* 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: 15px 0;
	}

	.header-container {
		flex-wrap: nowrap;
		padding: 0 15px;
		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;
	}

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

	.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,
	.service-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;
	}

	.service-section {
		background: #f9fafb !important;
		background-image: 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;
	}
}