/* ================================================================
   guide_intro.css — 자기분석/자소서/(향후 다른 기능) 이용 가이드
   공통 디자인 시스템 (SelfAnalysis_intro, Resume_intro 등에서 공유)
   ================================================================ */

:root {
	--primary-blue: #024192;
	--primary-light: #1E6CFB;
	--accent-green: #00C853;
	--accent-orange: #FF6B35;
	--accent-purple: #7C4DFF;
	--neutral-50: #FAFAFA;
	--neutral-100: #F5F5F5;
	--neutral-200: #EEEEEE;
	--neutral-700: #616161;
	--neutral-900: #212121;
}

body {
	font-family: 'Pretendard Variable', 'NanumSquareRound', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	color: var(--neutral-900);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.sa-intro-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

@media (min-width: 768px) {
	.sa-intro-container {
		padding: 0 48px;
	}
}

/* ========================================
   섹션 A: 히어로 — 다크 프리미엄
   ======================================== */
@keyframes gradientFlow {
	0%   { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

.sa-hero {
	padding: 100px 0 80px;
	position: relative;
	overflow: hidden;
	background: #09101F;
}

/* 우상단 블루 글로우 */
.sa-hero::before {
	content: '';
	position: absolute;
	top: -160px; right: -120px;
	width: 680px; height: 680px;
	background: radial-gradient(circle, rgba(30, 108, 251, 0.14) 0%, transparent 65%);
	pointer-events: none;
}

/* 좌하단 그린 글로우 */
.sa-hero::after {
	content: '';
	position: absolute;
	bottom: -120px; left: -80px;
	width: 500px; height: 500px;
	background: radial-gradient(circle, rgba(0, 200, 83, 0.08) 0%, transparent 65%);
	pointer-events: none;
}

/* 그리드 패턴 오버레이 */
.sa-hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 64px 64px;
	pointer-events: none;
	z-index: 0;
}

@media (max-width: 767px) {
	.sa-hero { padding: 60px 0 48px; }
}

/* 타이핑 커서 */
.typing-active::after {
	content: '|';
	display: inline;
	animation: cursorBlink 0.7s step-end infinite;
	margin-left: 1px;
}
.sa-hero .typing-active::after { color: #60A8FF; }
.sa-ai-card .typing-active::after { color: #6040B8; }
@keyframes cursorBlink { 50% { opacity: 0; } }

.sa-hero-inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 780px;
	margin: 0 auto;
}

.sa-hero h1 {
	font-size: 2.5rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.4;
	margin-bottom: 28px;
	color: #FFFFFF;
	opacity: 0;
	animation: heroFadeUp 0.8s ease-out 0.2s forwards;
}

.sa-hero h1 .highlight {
	background: linear-gradient(90deg, #60A8FF, #00D4AA);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

@keyframes heroFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
	.sa-hero h1 { font-size: 1.75rem; }
}

.sa-hero-sub {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.9;
	margin-bottom: 40px;
	font-weight: 500;
	opacity: 0;
	animation: heroFadeUp 0.8s ease-out 0.5s forwards;
}

.sa-hero-sub .em-strong {
	color: rgba(255, 255, 255, 0.95);
	font-weight: 700;
	border-bottom: 2px solid #FF7A45;
	padding-bottom: 1px;
}

@media (max-width: 767px) {
	.sa-hero-sub { font-size: 1rem; }
}

.sa-hero-cta {
	opacity: 0;
	animation: heroFadeUp 0.8s ease-out 0.8s forwards;
}

.sa-btn-primary {
	background: var(--accent-green);
	color: white;
	padding: 16px 36px;
	border-radius: 12px;
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 4px 16px rgba(0, 200, 83, 0.3);
	transition: all 0.25s;
	border: none;
	cursor: pointer;
}

.sa-btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 32px rgba(0, 200, 83, 0.4);
	color: white;
	text-decoration: none;
}

/* ========================================
   섹션 B: 고민 → 솔루션
   ======================================== */
.sa-why {
	padding: 80px 0;
	background: var(--neutral-50);
}

@media (max-width: 767px) {
	.sa-why { padding: 48px 0; }
}

.sa-section-title {
	font-size: 1.875rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 12px;
	color: var(--neutral-900);
}

@media (max-width: 767px) {
	.sa-section-title { font-size: 1.5rem; }
}

.sa-section-desc {
	font-size: 1.0625rem;
	color: var(--neutral-700);
	line-height: 1.7;
	margin-bottom: 48px;
	font-weight: 500;
}

.sa-two-pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 32px;
}

@media (min-width: 768px) {
	.sa-two-pillars {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
}

.sa-pillar {
	background: white;
	border-radius: 20px;
	padding: 40px 32px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0,0,0,0.06);
	border: 2px solid var(--neutral-200);
	transition: all 0.3s;
}

.sa-pillar::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	transform: scaleX(0);
	transition: transform 0.3s;
}

.sa-pillar:hover {
	transform: translateY(-6px);
	border-color: transparent;
}

.sa-pillar-orange:hover { box-shadow: 0 20px 48px rgba(255, 107, 53, 0.18); }
.sa-pillar-blue:hover   { box-shadow: 0 20px 48px rgba(30, 108, 251, 0.18); }

.sa-pillar:hover::before { transform: scaleX(1); }
.sa-pillar-orange::before { background: linear-gradient(90deg, #FF6B35, #FF8A5C); }
.sa-pillar-blue::before   { background: linear-gradient(90deg, #1E6CFB, #2979FF); }

.sa-pillar-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 6px;
	margin-bottom: 16px;
	letter-spacing: 0.02em;
}

.sa-pillar-orange .sa-pillar-tag { background: #FFF3E0; color: #E65100; }
.sa-pillar-blue   .sa-pillar-tag { background: #E3F2FD; color: #0D47A1; }

.sa-pillar h3 {
	font-size: 1.375rem;
	font-weight: 800;
	margin-bottom: 14px;
	color: var(--neutral-900);
}

.sa-pillar p {
	font-size: 0.9375rem;
	color: var(--neutral-700);
	line-height: 1.75;
	margin: 0;
}

/* 섹션B 인용 문구 */
.sa-quote {
	display: inline-block;
	font-style: normal;
	font-size: 1.7rem;
	font-weight: 800;
	color: #1E4FC2;
	letter-spacing: -0.02em;
	line-height: 1.4;
	margin-bottom: 6px;
}

/* 고민 카드 3개 */
.sa-pain-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 32px;
}

@media (max-width: 767px) {
	.sa-pain-cards { grid-template-columns: 1fr; }
}

/* 4-카드 레이아웃 변형 */
.sa-pain-cards--4 {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
	.sa-pain-cards--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
	.sa-pain-cards--4 { grid-template-columns: repeat(4, 1fr); }
}

.sa-pain-card {
	background: white;
	border-radius: 16px;
	padding: 36px 28px;
	text-align: center;
	border: 2px solid #DBEAFE;
	box-shadow: 0 4px 20px rgba(30, 108, 251, 0.06);
	transition: transform 0.25s, box-shadow 0.25s;
}

.sa-pain-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 36px rgba(30, 108, 251, 0.14);
}

.sa-pain-q {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #3B82F6, #60A5FA);
	color: white;
	font-size: 1.1rem;
	font-weight: 900;
	margin-bottom: 16px;
}

.sa-pain-card p {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--neutral-900);
	line-height: 1.6;
	margin: 0;
}

.sa-arrow-down {
	text-align: center;
	padding: 8px 0;
	color: var(--neutral-200);
	font-size: 2rem;
	line-height: 1;
}

/* 기업 AI 활용 인사이트 카드 */
.sa-insight-wrap {
	margin-bottom: 32px;
}

.sa-insight-card {
	background: #F2F6FF;
	border-radius: 20px;
	padding: 36px 40px;
	border: 1.5px solid #C8D8FF;
}

@media (max-width: 767px) {
	.sa-insight-card { padding: 24px 20px; }
}

.sa-insight-lead {
	font-size: 1.0625rem;
	color: var(--neutral-900);
	line-height: 1.8;
	font-weight: 500;
	margin-bottom: 14px;
}

.sa-insight-intro-text {
	font-size: 0.9375rem;
	color: var(--neutral-700);
	font-weight: 600;
	margin-bottom: 16px;
}

.sa-insight-points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 20px;
}

@media (max-width: 767px) {
	.sa-insight-points { grid-template-columns: 1fr; }
}

.sa-insight-point {
	background: white;
	border-radius: 12px;
	padding: 18px 20px;
	border: 1px solid #DBEAFE;
}

.sa-insight-num {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 800;
	color: #1E6CFB;
	background: #EBF3FF;
	padding: 3px 10px;
	border-radius: 6px;
	margin-bottom: 10px;
	letter-spacing: 0.02em;
}

.sa-insight-point p {
	font-size: 0.9375rem;
	color: var(--neutral-900);
	line-height: 1.65;
	margin: 0;
}

.sa-insight-em {
	font-weight: 700;
	color: #1E4FC2;
}

.sa-insight-body {
	font-size: 0.9375rem;
	color: var(--neutral-700);
	line-height: 1.75;
	margin-bottom: 20px;
}

.sa-insight-stat-row {
	display: flex;
	align-items: center;
	gap: 16px;
	background: white;
	border-radius: 12px;
	padding: 16px 20px;
	border: 1px solid #DBEAFE;
}

@media (max-width: 767px) {
	.sa-insight-stat-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

.sa-insight-stat-num {
	font-size: 1.25rem;
	font-weight: 900;
	color: #1E4FC2;
	white-space: nowrap;
}

.sa-insight-stat-label {
	font-size: 0.875rem;
	color: var(--neutral-700);
	line-height: 1.6;
}

/* AI 카드 — Step3(타임라인)의 보라 톤과 동일 */
.sa-ai-card-border {
	border-radius: 20px;
	border: 2px solid rgba(160, 126, 255, 0.24);
	box-shadow: 0 8px 40px rgba(124, 77, 255, 0.10);
	transition: box-shadow 0.3s;
}

.sa-ai-card-border:hover {
	box-shadow: 0 16px 56px rgba(124, 77, 255, 0.18);
}

.sa-ai-card {
	background: white;
	border-radius: 18px;
	padding: 48px 40px;
	text-align: center;
}

.sa-ai-card h3 {
	font-size: 1.5rem;
	font-weight: 800;
	margin-bottom: 16px;
	color: #6040B8;
}

.sa-ai-card p {
	font-size: 1.0625rem;
	color: #2E1E5E;
	line-height: 1.8;
	margin: 0 auto;
	max-width: 640px;
	font-weight: 500;
}

.sa-ai-em {
	font-style: normal;
	font-weight: 800;
	color: #6040B8;
	border-bottom: 2px solid rgba(96, 64, 184, 0.35);
	padding-bottom: 1px;
}

/* 결과물 카드 (이력서/포트폴리오 생성) — AI 카드 톤 변주 (청록) */
.sa-outcome-card-border {
	border-radius: 20px;
	border: 2px solid rgba(20, 184, 166, 0.22);
	box-shadow: 0 8px 40px rgba(20, 184, 166, 0.10);
	transition: box-shadow 0.3s;
}
.sa-outcome-card-border:hover {
	box-shadow: 0 16px 56px rgba(20, 184, 166, 0.18);
}
.sa-outcome-card {
	background: #fff;
	border-radius: 18px;
	padding: 40px 36px;
	text-align: center;
}
.sa-outcome-card h3 {
	font-size: 1.45rem;
	font-weight: 800;
	margin-bottom: 14px;
	color: #0F766E;
}
.sa-outcome-card p {
	font-size: 1rem;
	color: #134E4A;
	line-height: 1.75;
	margin: 0 auto;
	max-width: 640px;
	font-weight: 500;
}
.sa-outcome-card .sa-outcome-note {
	margin-top: 8px;
	font-size: 0.82rem;
	color: #5EA597;
	font-weight: 500;
}

/* ========================================
   섹션 C: STORY
   ======================================== */
.sa-story {
	padding: 100px 0;
	background: #09101F;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.sa-story::before {
	content: '';
	position: absolute;
	top: -80px; left: 50%;
	transform: translateX(-50%);
	width: 700px; height: 500px;
	background: radial-gradient(ellipse, rgba(160, 126, 255, 0.14) 0%, transparent 65%);
	pointer-events: none;
}

@media (max-width: 767px) {
	.sa-story { padding: 64px 0; }
}

.sa-story-inner {
	position: relative;
	z-index: 1;
	max-width: 680px;
	margin: 0 auto;
}

.sa-story-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	color: #A07EFF;
	background: rgba(160, 126, 255, 0.12);
	border: 1px solid rgba(160, 126, 255, 0.3);
	padding: 5px 14px;
	border-radius: 20px;
	margin-bottom: 24px;
	text-transform: uppercase;
}

.sa-story h2 {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #FFFFFF;
	line-height: 1.45;
	margin-bottom: 20px;
}

@media (max-width: 767px) {
	.sa-story h2 { font-size: 1.5rem; }
}

.sa-story-sub {
	font-size: 1rem;
	font-weight: 700;
	color: #A07EFF;
	margin-bottom: 20px;
	letter-spacing: -0.01em;
}

.sa-story-desc {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.85;
	font-weight: 400;
}

.sa-story-hl {
	color: #BFA0FF;
	font-weight: 700;
	border-bottom: 1.5px solid rgba(160, 126, 255, 0.5);
	padding-bottom: 1px;
}

/* ========================================
   섹션 D: 자소서 작성 진행 안내 (톤 다운)
   ======================================== */
.sa-steps {
	padding: 120px 0;
	background: white;
}

@media (max-width: 767px) {
	.sa-steps { padding: 72px 0; }
}

.sa-timeline {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

@media (min-width: 768px) {
	.sa-timeline {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
}

/* 3단계(자소서 작성) */
@media (min-width: 1100px) {
	.sa-timeline--3 {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}

/* 4단계(자기분석) */
@media (min-width: 1100px) {
	.sa-timeline--4 {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
}

.sa-step {
	text-align: left;
	position: relative;
	overflow: hidden;
	transition: all 0.3s;
	padding: 36px 28px 32px;
	border-radius: 20px;
	border: 1px solid transparent;
}

.sa-step::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
}

/* 톤 다운: 배경 더 연하게, 테두리·그라디언트 채도 낮춤 */
.sa-step-1 {
	background: linear-gradient(145deg, #FFFCF8 0%, #FFF8EF 100%);
	border-color: #FFE8CB;
	box-shadow: 0 4px 20px rgba(255, 140, 80, 0.06);
}
.sa-step-1::before { background: linear-gradient(90deg, #FF8C60, #FFB085); }
.sa-step-2 {
	background: linear-gradient(145deg, #F5F9FF 0%, #EBF3FF 100%);
	border-color: #C8DEFF;
	box-shadow: 0 4px 20px rgba(30, 108, 251, 0.06);
}
.sa-step-2::before { background: linear-gradient(90deg, #5B9BFF, #7AAFFB); }
.sa-step-3 {
	background: linear-gradient(145deg, #F8F5FF 0%, #F0EAFF 100%);
	border-color: #DDD0F8;
	box-shadow: 0 4px 20px rgba(124, 77, 255, 0.06);
}
.sa-step-3::before { background: linear-gradient(90deg, #A07EFF, #BFA0FF); }
.sa-step-4 {
	background: linear-gradient(145deg, #F1FBF8 0%, #E4F6F0 100%);
	border-color: #BCE8DB;
	box-shadow: 0 4px 20px rgba(20, 184, 166, 0.06);
}
.sa-step-4::before { background: linear-gradient(90deg, #14B8A6, #5EEAD4); }
.sa-step-bg-num {
	position: absolute;
	bottom: 8px; right: 20px;
	font-size: 7.5rem;
	font-weight: 900;
	line-height: 1;
	pointer-events: none;
	user-select: none;
	opacity: 0.04;
	color: #000;
}

.sa-step-number {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 800;
	margin-bottom: 24px;
	color: white;
	position: relative;
	z-index: 1;
}
.sa-step-1 .sa-step-number { background: linear-gradient(135deg, #FF8C60, #FFB085); box-shadow: 0 4px 12px rgba(255, 140, 80, 0.30); }
.sa-step-2 .sa-step-number { background: linear-gradient(135deg, #5B9BFF, #7AAFFB); box-shadow: 0 4px 12px rgba(91, 155, 255, 0.30); }
.sa-step-3 .sa-step-number { background: linear-gradient(135deg, #A07EFF, #BFA0FF); box-shadow: 0 4px 12px rgba(160, 126, 255, 0.30); }
.sa-step-4 .sa-step-number { background: linear-gradient(135deg, #14B8A6, #5EEAD4); box-shadow: 0 4px 12px rgba(20, 184, 166, 0.30); }

.sa-step-subtitle {
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 8px;
	position: relative;
	z-index: 1;
}
.sa-step-1 .sa-step-subtitle { color: #C4602A; }
.sa-step-2 .sa-step-subtitle { color: #2A5EB8; }
.sa-step-3 .sa-step-subtitle { color: #6040B8; }
.sa-step-4 .sa-step-subtitle { color: #0F766E; }

.sa-step h3 {
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--neutral-900);
	position: relative;
	z-index: 1;
}

.sa-step p {
	font-size: 0.9375rem;
	color: var(--neutral-700);
	line-height: 1.6;
	margin-bottom: 16px;
	position: relative;
	z-index: 1;
}

.sa-step-badge {
	display: inline-block;
	font-size: 0.8125rem;
	border-radius: 20px;
	padding: 5px 16px;
	font-weight: 700;
	position: relative;
	z-index: 1;
}
.sa-step-1 .sa-step-badge { background: rgba(255, 140, 80, 0.10); color: #C4602A; }
.sa-step-2 .sa-step-badge { background: rgba(91, 155, 255, 0.12); color: #2A5EB8; }
.sa-step-3 .sa-step-badge { background: rgba(160, 126, 255, 0.12); color: #6040B8; }
.sa-step-4 .sa-step-badge { background: rgba(20, 184, 166, 0.12); color: #0F766E; }

/* ========================================
   섹션 E: 꼭 필요한 기능
   ======================================== */
.sa-usage {
	padding: 80px 0;
	background: #EEF3FC;
}

@media (max-width: 767px) {
	.sa-usage { padding: 48px 0; }
}

/* SelfAnalysis_intro 활용 그리드 */
.sa-usage-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

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

@media (min-width: 1100px) {
	.sa-usage-grid { grid-template-columns: repeat(4, 1fr); }
}

.sa-usage-card {
	background: white;
	border-radius: 16px;
	padding: 28px 24px;
	border: 1px solid #E0E8F8;
	transition: transform 0.2s, box-shadow 0.2s;
}

.sa-usage-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(2, 65, 146, 0.1);
}

.sa-usage-number {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 800;
	color: #1E6CFB;
	background: #EBF3FF;
	padding: 4px 12px;
	border-radius: 8px;
	margin-bottom: 14px;
	letter-spacing: 0.01em;
}

.sa-usage-card h4 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--neutral-900);
	margin-bottom: 8px;
}

.sa-usage-card p {
	font-size: 0.875rem;
	color: var(--neutral-700);
	line-height: 1.6;
	margin: 0;
}

/* Resume_intro 기능 그리드 */
.sa-feature-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media (min-width: 768px) {
	.sa-feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.sa-feature-card {
	border-radius: 14px;
	padding: 24px 20px;
	border: 1px solid #E0E8F8;
	background: white;
	transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.sa-feature-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(2, 65, 146, 0.1);
	border-color: rgba(2, 65, 146, 0.2);
}

.sa-feature-icon {
	font-size: 1.75rem;
	margin-bottom: 12px;
	line-height: 1;
}

.sa-feature-name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--neutral-900);
	margin-bottom: 6px;
}

.sa-feature-card p {
	font-size: 0.84rem;
	color: var(--neutral-700);
	line-height: 1.55;
	margin: 0;
}

/* ========================================
   섹션 E: CTA
   ======================================== */
.sa-cta-section {
	padding: 96px 0 112px;
	text-align: center;
	background: #09101F;
	position: relative;
	overflow: hidden;
}

.sa-cta-section::before {
	content: '';
	position: absolute;
	top: -100px; left: 50%;
	transform: translateX(-50%);
	width: 600px; height: 400px;
	background: radial-gradient(ellipse, rgba(30, 108, 251, 0.12) 0%, transparent 65%);
	pointer-events: none;
}

.sa-cta-section .sa-intro-container { position: relative; z-index: 1; }

.sa-cta-section .sa-section-title { color: #FFFFFF; }
.sa-cta-section .sa-section-desc  { color: rgba(255, 255, 255, 0.65); }


.sa-btn-secondary {
	background: transparent;
	color: var(--primary-blue);
	padding: 10px 24px;
	border-radius: 10px;
	font-size: 0.875rem;
	font-weight: 600;
	border: 1.5px solid var(--primary-blue);
	cursor: pointer;
	transition: all 0.25s;
}

.sa-btn-secondary:hover {
	background: var(--primary-blue);
	color: white;
}

.sa-btn-secondary:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}