:root {

	--primary-blue: #2563EB;

	--primary-blue-dark: #1D4ED8;

	--feature-blue: #3E7AF5;

	--white: #FFFFFF;

	--black: #000000;

	--text-dark: #1F2937;

	--text-gray: #6B7280;

	--text-light: #9CA3AF;

	--bg-light: #F8FAFC;

	--bg-blue-light: #EFF6FF;

	--border-gray: #E5E7EB;

}



@font-face {

	font-family: "Inter";

	src: url("font/inter/Inter-Regular.ttf") format("truetype");

	font-weight: 400;

	font-display: swap;

}



@font-face {

	font-family: "Inter";

	src: url("font/inter/Inter-Medium.ttf") format("truetype");

	font-weight: 500;

	font-display: swap;

}



@font-face {

	font-family: "Inter";

	src: url("font/inter/Inter-SemiBold.ttf") format("truetype");

	font-weight: 600;

	font-display: swap;

}



@font-face {

	font-family: "Inter";

	src: url("font/inter/Inter-Bold.ttf") format("truetype");

	font-weight: 700;

	font-display: swap;

}



* {

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}



body, html {

	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	font-size: 16px;

	line-height: 1.6;

	color: #0C2882;

	background: var(--white);

}



h1, h2, h3, h4, h5, h6 {

	font-family: "Inter", sans-serif;

	font-weight: 600;

	line-height: 1.2;

	color: #0C2882;

}



h1 {

	font-size: 3rem;

	line-height: 1.1;

}



h2 {

	font-size: 2.25rem;

	margin-bottom: 1rem;

}



h3 {

	font-size: 1.5rem;

	margin-bottom: 0.5rem;

}



h5 {

	font-size: 1.125rem;

	margin-bottom: 0.5rem;

}



p {

	color: var(--text-gray);

	line-height: 1.7;

}



a {

	text-decoration: none;

	color: inherit;

}



img {

	max-width: 100%;

	height: auto;

}



/* Header */

.header-section {

	background: var(--white);

	padding: 1rem 2rem;

}



.header {

	max-width: 1200px;

	margin: 0 auto;

	display: flex;

	justify-content: space-between;

	align-items: center;

	gap: 1rem;

}



.header a:first-child {

	flex-shrink: 0;

}



.header-logo {

	height: 44px;

	width: auto;

}



/* Hero Section */

.hero-section {

	background: var(--white);

	padding: 3rem 2rem 5rem;

	text-align: center;

}



.hero-content {

	max-width: 800px;

	margin: 0 auto;

}



.hero-badge {

	display: inline-block;

	padding: 0.375rem 0.75rem;

	background: #EFF6FF;

	border-radius: 20px;

	font-size: 0.875rem;

	color: #0C2882;

	margin-bottom: 1.5rem;

}



.hero-title {

	font-family: "Inter", sans-serif;

	font-weight: 600;

	font-size: 65px;

	line-height: 1.15;

	color: #0C2882;

	max-width: 700px;

	margin: 0 auto 1.5rem;

}



.gradient-text {

	background: linear-gradient(135deg, #3E7AF5 0%, #0C2882 50%, #3E7AF5 100%);

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

	background-clip: text;

}



.hero-subtitle {

	font-size: 1.125rem;

	color: #0C2882;

	margin-bottom: 2rem;

	line-height: 1.7;

}



.app-store-btn {

	display: inline-flex;

	align-items: center;

	gap: 0.75rem;

	white-space: nowrap;

	background: #0C2882;

	color: var(--white);

	padding: 1rem 2rem;

	border-radius: 32px;

	font-size: 1.125rem;

	font-weight: 600;

	font-family: "Inter", sans-serif;

	transition: transform 0.2s, box-shadow 0.2s;

}



.app-store-btn:hover {

	transform: scale(1.05);

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

}



.app-store-btn svg {

	width: 24px;

	height: 24px;

	min-width: 24px;

	flex-shrink: 0;

	fill: currentColor;

}



/* Features Section */

.features-section {

	padding: 5rem 2rem;

	background: var(--white);

}



.features-container {

	max-width: 1000px;

	margin: 0 auto;

}



.features-grid {

	display: grid;

	grid-template-columns: repeat(2, 1fr);

	gap: 1.5rem;

}



.feature-card {

	background: var(--feature-blue);

	border-radius: 40px;

	padding: 2rem;

}



.feature-card h3 {

	color: var(--white);

	font-size: 33px;

	font-weight: 600;

	margin-bottom: 0.75rem;

	line-height: 1.1;

}



.feature-card p {

	font-size: 1rem;

	color: rgba(255, 255, 255, 0.9);

	margin-bottom: 1.5rem;

	line-height: 1.6;

}



.feature-card img {

	width: 85%;

	border-radius: 8px;

	display: block;

	margin: 0 auto;

}



/* Struggle Section */

.struggle-section {

	padding: 5rem 2rem;

	background: var(--white);

}



.struggle-container {

	max-width: 1000px;

	margin: 0 auto;

	text-align: center;

}



.struggle-container > h2 {

	margin-bottom: 3rem;

	font-size: 2.25rem;

	font-weight: 600;

}



.struggle-grid {

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 1.5rem;

}



.struggle-card {

	background: var(--bg-light);

	border-radius: 40px;

	overflow: hidden;

	text-align: left;

}



.struggle-card img {

	width: 100%;

	display: block;

}



.struggle-card-content {

	padding: 1.5rem;

}



.struggle-card h5 {

	font-size: 28px;

	font-weight: 600;

	color: #0C2882;

	margin: 0 0 0.5rem 0;

	line-height: 1.2;

}



.struggle-card p {

	font-family: "Inter", sans-serif;

	font-size: 1rem;

	font-weight: 400;

	color: #0C2882;

	margin: 0;

	line-height: 1.6;

}



/* FAQ Section */

.faq-section {

	padding: 5rem 2rem;

	background: var(--bg-light);

}



.faq-container {

	max-width: 800px;

	margin: 0 auto;

}



.faq-container > h2 {

	text-align: center;

	margin-bottom: 2.5rem;

	font-weight: 600;

}



.faq-list {

	background: var(--white);

	border-radius: 16px;

	padding: 1rem 2rem;

}



.faq-item {

	padding: 1.25rem 0;

	border-bottom: 1px solid var(--border-gray);

}



.faq-item:last-child {

	border-bottom: none;

}



.faq-question {

	font-size: 18px;

	font-weight: 500;

	color: #0C2882;

	cursor: pointer;

	padding-right: 2rem;

	position: relative;

}



.faq-question::after {

	content: '';

	position: absolute;

	right: 0;

	top: 50%;

	transform: translateY(-50%);

	width: 20px;

	height: 20px;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230C2882' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");

	background-size: contain;

	background-repeat: no-repeat;

	transition: transform 0.3s ease;

}



.faq-question.expanded::after {

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230C2882' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");

}



.faq-answer {

	max-height: 0;

	overflow: hidden;

	margin-top: 0;

	font-size: 0.9375rem;

	color: #0C2882;

	line-height: 1.6;

	transition: max-height 0.3s ease, margin-top 0.3s ease;

}



.faq-question.expanded + .faq-answer {

	max-height: 200px;

	margin-top: 0.75rem;

}



/* CTA Section */

.cta-section {

	padding: 5rem 2rem;

	background: var(--white);

}



.cta-container {

	max-width: 1000px;

	margin: 0 auto;

	display: flex;

	align-items: center;

	gap: 4rem;

}



.cta-content {

	flex: 1;

}



.cta-content h2 {

	font-size: 2rem;

	font-weight: 600;

	margin-bottom: 1rem;

}



.cta-content p {

	margin-bottom: 1.5rem;

	color: #0C2882;

}



.cta-image {

	flex: 1;

}



.cta-image img {

	width: 100%;

	border-radius: 40px;

}



/* Footer */

.footer-section {

	padding: 2rem;

	background: var(--white);

}



.footer {

	max-width: 1200px;

	margin: 0 auto;

	display: flex;

	justify-content: space-between;

	align-items: center;

}



.footer-logo img {

	height: 44px;

}



.footer-links a {

	color: #0C2882;

	font-size: 0.875rem;

	margin-left: 2rem;

}



.footer-links a:hover {

	color: var(--primary-blue);

}



.footer-right {

	font-size: 0.875rem;

}



.footer-right a {

	color: #0C2882;

	text-decoration: none;

}



.footer-right a:hover {

	text-decoration: underline;

}



/* Modal */

.modalBackground {

	display: none;

	background: rgba(0, 0, 0, 0.5);

	position: fixed;

	z-index: 100;

	left: 0;

	top: 0;

	right: 0;

	bottom: 0;

	padding: 1rem;

	justify-content: center;

	align-items: center;

}



.modalBackground.isVisible {

	display: flex;

}



.modal {

	background: var(--white);

	border-radius: 16px;

	max-width: 500px;

	padding: 2rem;

	text-align: center;

}



.modal-title {

	font-size: 1.5rem;

	font-weight: 600;

	margin-bottom: 1rem;

}



.modal-text {

	color: var(--text-gray);

	margin-bottom: 1.5rem;

}



.btn {

	background: var(--primary-blue);

	color: var(--white);

	padding: 0.75rem 2rem;

	border-radius: 8px;

	border: none;

	font-size: 1rem;

	font-weight: 600;

	cursor: pointer;

	transition: background 0.2s;

}



.btn:hover {

	background: var(--primary-blue-dark);

}



/* Header Nav */

.header-nav {

	display: flex;

	gap: 1.5rem;

	align-items: center;

	flex-shrink: 0;

}



.header-nav a {

	font-size: 0.9375rem;

	font-weight: 500;

	color: #0C2882;

	white-space: nowrap;

	text-decoration: none;

}



.header-nav a:hover {

	color: var(--primary-blue);

}



.header-nav a.active {

	color: var(--primary-blue);

}



.header-download-btn {

	display: inline-flex;

	align-items: center;

	background: #0C2882;

	color: var(--white) !important;

	padding: 0.5rem 1.25rem;

	border-radius: 20px;

	font-size: 0.875rem !important;

	white-space: nowrap;

	flex-shrink: 0;

}



.header-download-mobile {

	display: none;

	background: #0C2882;

	color: var(--white) !important;

	padding: 0.5rem 1.25rem;

	border-radius: 20px;

	font-size: 0.875rem;

	white-space: nowrap;

	flex-shrink: 0;

	text-decoration: none;

	font-weight: 600;

	align-items: center;

	gap: 0.4rem;

}



.header-download-mobile svg {

	width: 16px;

	height: 16px;

	fill: white;

	font-weight: 600;

	transition: background 0.2s;

	white-space: nowrap;

}



.header-download-btn:hover {

	background: var(--primary-blue);

}



/* Burger Menu */

.burger-menu {

	display: none;

	flex-direction: column;

	justify-content: center;

	gap: 5px;

	width: 28px;

	height: 28px;

	cursor: pointer;

	background: none;

	border: none;

	padding: 0;

	z-index: 1001;

}



.burger-menu span {

	display: block;

	width: 100%;

	height: 2.5px;

	background: #0C2882;

	border-radius: 2px;

	transition: transform 0.3s, opacity 0.3s;

}



.burger-menu.open span:nth-child(1) {

	transform: translateY(7.5px) rotate(45deg);

}



.burger-menu.open span:nth-child(2) {

	opacity: 0;

}



.burger-menu.open span:nth-child(3) {

	transform: translateY(-7.5px) rotate(-45deg);

}



.mobile-nav-overlay {

	display: none;

	position: fixed;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: rgba(0, 0, 0, 0.4);

	z-index: 999;

	opacity: 0;

	transition: opacity 0.3s;

}



.mobile-nav-overlay.open {

	opacity: 1;

}



.mobile-nav {

	display: none;

	position: fixed;

	top: 0;

	right: -280px;

	width: 280px;

	height: 100%;

	background: var(--white);

	z-index: 1000;

	padding: 5rem 2rem 2rem;

	flex-direction: column;

	gap: 0;

	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);

	transition: right 0.3s ease;

}



.mobile-nav.open {

	right: 0;

}



.mobile-nav a {

	display: block;

	font-size: 1.125rem;

	font-weight: 500;

	color: #0C2882;

	padding: 1rem 0;

	border-bottom: 1px solid #E5E7EB;

	text-decoration: none;

}



.mobile-nav a:last-child {

	border-bottom: none;

}



.mobile-nav a.active {

	color: var(--primary-blue);

}



.mobile-nav .mobile-nav-download {

	display: inline-flex;

	align-items: center;

	gap: 0.5rem;

	background: #0C2882;

	color: var(--white);

	padding: 0.75rem 1.5rem;

	border-radius: 24px;

	font-size: 1rem;

	font-weight: 600;

	margin-top: 1.5rem;

	text-align: center;

	justify-content: center;

	border-bottom: none;

}



.mobile-nav .mobile-nav-download svg {

	width: 20px;

	height: 20px;

	fill: currentColor;

}



/* Blog Hero */

.blog-hero {

	padding: 4rem 2rem 2rem;

	text-align: center;

	background: var(--white);

}



.blog-hero h1 {

	font-size: 2.5rem;

	margin-bottom: 0.75rem;

}



.blog-hero-subtitle {

	font-size: 1.125rem;

	color: var(--text-gray);

	max-width: 600px;

	margin: 0 auto;

}



/* Blog List */

.blog-list {

	padding: 2rem 2rem 5rem;

	background: var(--white);

}



.blog-list-container {

	max-width: 900px;

	margin: 0 auto;

	display: flex;

	flex-direction: column;

	gap: 1.5rem;

}



.blog-card {

	display: flex;

	gap: 2rem;

	padding: 2rem;

	background: var(--bg-light);

	border-radius: 20px;

	transition: transform 0.2s;

	cursor: pointer;

	align-items: center;

}



.blog-card:hover {

	transform: translateY(-2px);

}



.blog-card-image {

	width: 200px;

	min-width: 200px;

	height: 140px;

	border-radius: 12px;

	overflow: hidden;

}



.blog-card-image img {

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.blog-card-content {

	flex: 1;

}



.blog-card-meta {

	font-size: 0.8125rem;

	color: var(--text-gray);

	margin-bottom: 0.5rem;

}



.blog-card-content h3 {

	font-size: 1.375rem;

	margin-bottom: 0.5rem;

}



.blog-card-content p {

	font-size: 0.9375rem;

	color: var(--text-gray);

}



.blog-card-tag {

	display: inline-block;

	padding: 0.25rem 0.625rem;

	background: #EFF6FF;

	border-radius: 12px;

	font-size: 0.75rem;

	color: var(--primary-blue);

	font-weight: 500;

	margin-top: 0.75rem;

}



/* Article Page */

.article-hero {

	padding: 3rem 2rem 2rem;

	background: #F8FAFC;

}



.article-hero-inner {

	max-width: 720px;

	margin: 0 auto;

}



.article-breadcrumb {

	font-size: 0.8125rem;

	color: var(--text-gray);

	margin-bottom: 1.5rem;

}



.article-breadcrumb a {

	color: var(--primary-blue);

}



.article-hero h1 {

	font-size: 2.25rem;

	margin-bottom: 1rem;

	line-height: 1.25;

}



.article-meta {

	font-size: 0.875rem;

	color: var(--text-gray);

}



.article-hero-image {

	max-width: 100%;

	padding: 0 0 2rem;

	background: #F8FAFC;

}

.article-hero-image img {

	display: block;

	width: 100%;

	max-width: 720px;

	height: 320px;

	margin: 0 auto;

	object-fit: cover;

	border-radius: 16px;

}



.article-body {

	padding: 2rem 2rem 4rem;

	background: #F8FAFC;

}



.article-content {

	max-width: 720px;

	margin: 0 auto;

}



.article-content h2 {

	font-size: 1.5rem;

	margin: 2.5rem 0 1rem;

}



.article-content p {

	margin-bottom: 1.25rem;

	color: #1a1a1a;

	font-size: 1.0625rem;

	line-height: 1.8;

}



.article-content em {

	font-style: italic;

}



.article-content strong {

	font-weight: 600;

	color: #1a1a1a;

}



.article-content ul {

	margin-bottom: 1.25rem;

	padding-left: 1.5rem;

	color: #1a1a1a;

}



.article-content li {

	font-size: 1.0625rem;

	line-height: 1.8;

	color: #1a1a1a;

	margin-bottom: 0.25rem;

}



.article-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 2rem 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	background: var(--white);
	border-radius: 16px;
	overflow: hidden;
}

.article-table thead {
	background: #0C2882;
	color: var(--white);
}

.article-table th {
	padding: 0.75rem 1rem;
	text-align: left;
	font-weight: 600;
	font-size: 0.875rem;
}

.article-table td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border-gray);
	color: #1a1a1a;
}

.article-table tbody tr:hover {
	background: var(--bg-blue-light);
}

.article-faq {
	margin: 1.5rem 0 2.5rem;
}

.article-faq h3 {
	font-size: 1.125rem;
	margin: 1.5rem 0 0.5rem;
	color: #0C2882;
}

.article-faq p {
	margin-bottom: 0;
}

.article-cta {

	background: var(--white);

	border-radius: 20px;

	padding: 2rem;

	margin: 2.5rem 0;

	text-align: center;

}



.article-cta-final {

	background: var(--white);

}



.article-cta h3 {

	margin-bottom: 0.5rem;

}



.article-cta p {

	color: var(--text-gray) !important;

	margin-bottom: 1rem;

	font-size: 1rem !important;

}



.app-store-btn-sm {

	padding: 0.75rem 1.5rem;

	font-size: 0.9375rem;

}



/* Responsive */

@media (max-width: 900px) {

	.article-table {
		font-size: 0.8125rem;
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.features-grid {

		grid-template-columns: 1fr;

	}



	.feature-card h3 {

		font-size: 36px;

	}



	.struggle-grid {

		grid-template-columns: 1fr;

		max-width: 400px;

		margin: 0 auto;

	}



	.struggle-card h5 {

		font-size: 24px;

	}



	.cta-container {

		flex-direction: column;

		text-align: center;

	}



	.cta-image {

		max-width: 400px;

	}



	.blog-card {

		flex-direction: column;

	}



	.blog-card-image {

		width: 100%;

		min-width: auto;

		height: 160px;

	}

}



@media (max-width: 768px) {

	.hero-section {

		padding: 2rem 1.5rem 3rem;

	}



	.hero-title {

		font-size: 42px;

	}



	.features-section,

	.struggle-section,

	.faq-section,

	.cta-section {

		padding: 3rem 1.5rem;

	}



	.feature-card h3 {

		font-size: 28px;

	}



	.struggle-card h5 {

		font-size: 20px;

	}



	.struggle-card p {

		font-size: 16px;

	}



	.footer {

		flex-direction: column;

		gap: 1rem;

		text-align: center;

	}



	.footer-links a {

		margin: 0 1rem;

	}



	.header-section {

		padding: 0.75rem 1rem;

	}



	.header-nav {

		display: none;

	}



	.header-download-mobile {

		display: inline-flex;

	}



	.burger-menu {

		display: flex;

	}



	.mobile-nav-overlay.open {

		display: block;

	}



	.mobile-nav {

		display: block;

	}



	.header-logo {

		height: 36px;

	}



	.blog-hero h1 {

		font-size: 2rem;

	}



	.article-hero h1 {

		font-size: 1.75rem;

	}

}



@media (max-width: 480px) {

	.header-section {

		padding: 0.625rem 0.75rem;

	}



	.header-logo {

		height: 32px;

	}



	.hero-title {

		font-size: 32px;

	}



	.hero-subtitle {

		font-size: 1rem;

	}



	.feature-card {

		padding: 1.5rem;

	}



	.feature-card h3 {

		font-size: 24px;

	}



	.faq-list {

		padding: 0.5rem 1rem;

	}



	.app-store-btn {

		padding: 0.75rem 1.25rem;

		font-size: 0.875rem;

		gap: 0.5rem;

	}



	.app-store-btn svg {

		width: 20px;

		height: 20px;

		min-width: 20px;

	}



	.blog-hero h1 {

		font-size: 1.625rem;

	}



	.blog-hero-subtitle {

		font-size: 0.9375rem;

	}



	.article-hero h1 {

		font-size: 1.5rem;

	}

}