/* ============================================================
   CF Korea — Block 01 Hero
   Dark editorial hero with live DB data. Tokens only. Strict type grid.
============================================================ */

.cfk-hero {
	position: relative;
	overflow: hidden;
	background: var(--cf-bg-darker);
	color: #fff;
	padding: clamp(56px, 6vw, 96px) var(--cf-s-6) clamp(64px, 6vw, 104px);
	font-family: var(--cf-font);
	isolation: isolate;
}

/* ====== BACKGROUND (restrained) ====== */
.cfk-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, var(--cf-bg-dark) 0%, var(--cf-bg-darker) 100%);
	pointer-events: none;
}
.cfk-hero-grid-pattern { display: none; }  /* was noisy AI-slop grid, removed */
.cfk-hero-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(120px);
	pointer-events: none;
	will-change: transform;
}
.cfk-hero-glow--cyan {
	width: 640px;
	height: 640px;
	top: -220px;
	right: -180px;
	background: radial-gradient(circle, rgba(0, 158, 227, 0.22), transparent 70%);
}
.cfk-hero-glow--amber { display: none; }  /* single-glow for refined feel */

/* ====== LAYOUT ====== */
.cfk-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: clamp(40px, 5vw, 88px);
	align-items: start;
}
@media (max-width: 1100px) {
	.cfk-hero-inner { grid-template-columns: 1fr; gap: var(--cf-s-12); }
}

/* ====== COPY COLUMN ====== */
.cfk-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--cf-s-3);
	font-size: var(--cf-text-11);
	font-weight: var(--cf-w-bold);
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	padding: 9px 16px 9px 14px;
	background: var(--cf-glass-bg);
	border: 1px solid var(--cf-glass-border);
	border-radius: 999px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.cfk-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cf-green);
	box-shadow: 0 0 0 3px rgba(34, 201, 122, 0.24);
	animation: cfk-pulse 2.4s ease-in-out infinite;
}
@keyframes cfk-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(34, 201, 122, 0.24); }
	50%      { box-shadow: 0 0 0 7px rgba(34, 201, 122, 0.08); }
}

.cfk-hero-h1 {
	/* hero override of design-map scale — intentional, documented */
	font-size: clamp(var(--cf-text-32), 4.4vw, var(--cf-text-56));
	font-weight: var(--cf-w-black);
	line-height: 1.02;
	letter-spacing: -1.4px;
	color: #fff;
	margin: var(--cf-s-5) 0 var(--cf-s-4);
	max-width: 18ch;
}
.cfk-hero-em {
	font-style: normal;
	position: relative;
	display: inline-block;
	padding: 0 4px;
	white-space: nowrap;
}
.cfk-hero-em--cyan {
	color: var(--cf-cyan-light);
	background: linear-gradient(180deg, transparent 62%, rgba(0, 158, 227, 0.22) 62%);
}
.cfk-hero-em--amber {
	color: var(--cf-accent-light);
	background: linear-gradient(180deg, transparent 62%, rgba(245, 166, 35, 0.20) 62%);
}
@media (max-width: 700px) {
	.cfk-hero-br-lg { display: none; }
}

.cfk-hero-lede {
	font-size: var(--cf-text-16);
	font-weight: var(--cf-w-regular);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.68);
	max-width: 56ch;
	margin: 0 0 var(--cf-s-8);
}
.cfk-hero-lede strong {
	color: #fff;
	font-weight: var(--cf-w-bold);
}

/* ====== BULLETS (refined, editorial) ====== */
.cfk-hero-bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--cf-s-10);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cf-s-4) var(--cf-s-8);
}
@media (max-width: 560px) {
	.cfk-hero-bullets { grid-template-columns: 1fr; gap: var(--cf-s-3); }
}
.cfk-hero-bullets li {
	display: flex;
	align-items: flex-start;
	gap: var(--cf-s-3);
	padding: var(--cf-s-3) 0;
	border-top: 1px solid var(--cf-glass-border);
	color: rgba(255, 255, 255, 0.92);
	animation: cfk-fade-up 0.7s var(--cf-ease-out) both;
	animation-delay: var(--d, 0ms);
}
.cfk-hero-bullets b {
	display: block;
	font-size: var(--cf-text-14);
	font-weight: var(--cf-w-bold);
	color: #fff;
	margin-bottom: 3px;
	line-height: 1.3;
}
.cfk-hero-bullets span {
	display: block;
	font-size: var(--cf-text-12);
	color: rgba(255, 255, 255, 0.52);
	line-height: 1.45;
}
.cfk-b-ic {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--cf-cyan-light);
	margin-top: 1px;
	stroke-width: 2;
}
@keyframes cfk-fade-up {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ====== CTAs ====== */
.cfk-hero-cta {
	display: flex;
	gap: var(--cf-s-3);
	flex-wrap: wrap;
	margin-bottom: var(--cf-s-6);
}
.cfk-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--cf-s-3);
	padding: 15px var(--cf-s-5);
	border-radius: var(--cf-radius);
	font-family: var(--cf-font);
	font-size: var(--cf-text-14);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s var(--cf-ease), box-shadow 0.25s var(--cf-ease), background 0.2s, border-color 0.2s, color 0.2s;
	border: 1.5px solid transparent;
}
.cfk-btn b {
	display: block;
	font-weight: var(--cf-w-black);
	font-size: var(--cf-text-15);
	line-height: 1.15;
	letter-spacing: -0.1px;
}
.cfk-btn small {
	display: block;
	font-size: var(--cf-text-11);
	font-weight: var(--cf-w-semi);
	opacity: 0.7;
	margin-top: 2px;
}
.cfk-btn-ic {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	stroke-width: 2.2;
}
.cfk-btn--primary {
	background: var(--cf-accent);
	color: var(--cf-bg-dark);
	box-shadow: var(--cf-shadow-accent);
}
.cfk-btn--primary:hover {
	transform: translateY(-2px);
	background: var(--cf-accent-light);
	box-shadow: 0 20px 44px rgba(245, 166, 35, 0.38);
}
.cfk-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: var(--cf-glass-border-hi);
}
.cfk-btn--ghost:hover {
	background: var(--cf-glass-bg);
	border-color: rgba(0, 158, 227, 0.55);
}

/* ====== TRUST RIBBON ====== */
.cfk-hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cf-s-4) var(--cf-s-8);
	padding-top: var(--cf-s-5);
	border-top: 1px solid var(--cf-glass-border);
}
.cfk-trust-item {
	display: inline-flex;
	align-items: center;
	gap: var(--cf-s-2);
	font-size: var(--cf-text-12);
	font-weight: var(--cf-w-medium);
	color: rgba(255, 255, 255, 0.55);
}
.cfk-trust-ic {
	width: 16px;
	height: 16px;
	color: rgba(255, 255, 255, 0.4);
	flex-shrink: 0;
	stroke-width: 2;
}

/* ====== SIDE COLUMN ====== */
.cfk-hero-side {
	display: flex;
	flex-direction: column;
	gap: var(--cf-s-5);
}

/* ---- STATS (editorial, not boxed) ---- */
.cfk-hero-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cf-s-4);
	padding: var(--cf-s-5) 0 var(--cf-s-6);
	border-top: 1px solid var(--cf-glass-border);
	border-bottom: 1px solid var(--cf-glass-border);
}
.cfk-stat {
	text-align: left;
}
.cfk-stat + .cfk-stat {
	padding-left: var(--cf-s-4);
	border-left: 1px solid var(--cf-glass-border);
}
.cfk-stat-n {
	font-family: var(--cf-font-display);
	font-size: clamp(var(--cf-text-32), 3.4vw, var(--cf-text-40));
	font-weight: var(--cf-w-regular);
	line-height: 0.95;
	letter-spacing: 0.5px;
	color: #fff;
	margin-bottom: var(--cf-s-2);
}
.cfk-stat-n--cyan  { color: var(--cf-cyan-light); }
.cfk-stat-n--amber { color: var(--cf-accent-light); }
.cfk-stat-l {
	font-size: var(--cf-text-10);
	font-weight: var(--cf-w-bold);
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: rgba(255, 255, 255, 0.48);
	line-height: 1.4;
}

/* ---- PREVIEW GRID (editorial cards) ---- */
.cfk-hero-preview {
	padding-top: var(--cf-s-2);
}
.cfk-preview-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: var(--cf-text-10);
	font-weight: var(--cf-w-bold);
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.48);
	margin-bottom: var(--cf-s-4);
}
.cfk-preview-head a {
	color: var(--cf-cyan-light);
	text-decoration: none;
	font-weight: var(--cf-w-bold);
	letter-spacing: 1.3px;
	transition: color 0.15s;
}
.cfk-preview-head a:hover { color: var(--cf-accent-light); }

.cfk-preview-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cf-s-3);
}
.cfk-preview-card {
	display: block;
	text-decoration: none;
	color: #fff;
	opacity: 0;
	animation: cfk-fade-up 0.6s var(--cf-ease-out) forwards;
	animation-delay: var(--d, 0ms);
	transition: transform 0.25s var(--cf-ease);
}
.cfk-preview-card:hover { transform: translateY(-3px); }
.cfk-preview-card:hover .cfk-pc-img::after {
	background: linear-gradient(180deg, transparent 30%, rgba(5, 16, 28, 0.92) 100%);
}

.cfk-pc-img {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: var(--cf-bg-dark);
	background-size: cover;
	background-position: center;
	border-radius: var(--cf-radius);
	overflow: hidden;
	border: 1px solid var(--cf-glass-border);
	transition: border-color 0.25s var(--cf-ease);
}
.cfk-preview-card:hover .cfk-pc-img { border-color: rgba(255, 195, 96, 0.5); }
.cfk-pc-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(5, 16, 28, 0.82) 100%);
	transition: background 0.3s;
}
.cfk-pc-price {
	position: absolute;
	left: var(--cf-s-2);
	bottom: var(--cf-s-2);
	z-index: 2;
	font-family: var(--cf-font-display);
	font-size: var(--cf-text-16);
	letter-spacing: 0.5px;
	color: var(--cf-accent-light);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.cfk-pc-title {
	font-size: var(--cf-text-11);
	font-weight: var(--cf-w-medium);
	color: rgba(255, 255, 255, 0.62);
	margin-top: var(--cf-s-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ====== SCROLL HINT ====== */
.cfk-hero-scroll {
	position: absolute;
	left: 50%;
	bottom: var(--cf-s-5);
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: var(--cf-s-2);
	font-size: var(--cf-text-10);
	font-weight: var(--cf-w-bold);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);  /* WCAG-safe on dark */
	text-decoration: none;
	padding: var(--cf-s-3) var(--cf-s-4);
	border-radius: 999px;
	background: var(--cf-glass-bg);
	border: 1px solid var(--cf-glass-border);
	z-index: 3;
	transition: color 0.2s;
}
/* Kill header margin-bottom on koreya — hero sits flush under nav */
body.page-koreya .header { margin-bottom: 0; }

.cfk-hero-scroll:hover { color: var(--cf-cyan-light); }
.cfk-hero-scroll svg { animation: cfk-bounce 2.4s ease-in-out infinite; }
@keyframes cfk-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(3px); }
}

/* ============================================================
   QUIZ MODAL
============================================================ */
.cfk-modal[hidden] { display: none; }
.cfk-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--cf-s-6);
	font-family: var(--cf-font);
	opacity: 0;
	transition: opacity 0.28s var(--cf-ease);
}
.cfk-modal.is-open { opacity: 1; }
.cfk-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 16, 28, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
}
.cfk-modal-card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 560px;
	background: var(--cf-bg);
	border-radius: var(--cf-radius-xl);
	box-shadow: var(--cf-shadow-lg);
	overflow: hidden;
	padding: var(--cf-s-10) var(--cf-s-10) var(--cf-s-8);
	transform: translateY(22px) scale(0.97);
	transition: transform 0.38s var(--cf-ease);
}
.cfk-modal.is-open .cfk-modal-card { transform: translateY(0) scale(1); }

.cfk-modal-close {
	position: absolute;
	top: var(--cf-s-3);
	right: var(--cf-s-3);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(15, 38, 64, 0.05);
	color: var(--cf-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	transition: all 0.2s var(--cf-ease);
}
.cfk-modal-close:hover {
	background: rgba(15, 38, 64, 0.1);
	color: var(--cf-primary);
	transform: rotate(90deg);
}
.cfk-modal-close svg { width: 18px; height: 18px; stroke-width: 2.2; }

.cfk-modal-head {
	margin-bottom: var(--cf-s-6);
	padding-right: var(--cf-s-8);
}
.cfk-modal-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--cf-s-2);
	font-size: var(--cf-text-10);
	font-weight: var(--cf-w-bold);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--cf-text-muted);
	margin-bottom: var(--cf-s-3);
}
.cfk-modal-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cf-green);
	box-shadow: 0 0 0 3px rgba(34, 201, 122, 0.2);
	animation: cfk-pulse 2s ease-in-out infinite;
}
.cfk-modal-title {
	font-size: var(--cf-text-24);
	font-weight: var(--cf-w-black);
	line-height: 1.2;
	color: var(--cf-primary);
	letter-spacing: -0.5px;
	margin: 0 0 var(--cf-s-2);
}
.cfk-modal-sub {
	font-size: var(--cf-text-14);
	color: var(--cf-text-muted);
	line-height: 1.55;
	margin: 0;
}

/* ---- FORM ---- */
.cfk-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cf-s-3);
	margin-bottom: var(--cf-s-5);
}
@media (max-width: 560px) {
	.cfk-form-grid { grid-template-columns: 1fr; }
}
.cfk-field {
	display: flex;
	flex-direction: column;
	gap: var(--cf-s-2);
}
.cfk-field-label {
	font-size: var(--cf-text-11);
	font-weight: var(--cf-w-bold);
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--cf-text-muted);
}
.cfk-field--req .cfk-field-label::after {
	content: ' *';
	color: var(--cf-red);
}
.cfk-opt {
	font-weight: var(--cf-w-medium);
	text-transform: none;
	letter-spacing: 0;
	color: var(--cf-text-light);
	font-size: var(--cf-text-10);
}
.cfk-field input,
.cfk-field select {
	padding: var(--cf-s-3) var(--cf-s-4);
	border: 1.5px solid var(--cf-border);
	border-radius: var(--cf-radius-sm);
	font-size: var(--cf-text-14);
	font-weight: var(--cf-w-medium);
	color: var(--cf-primary);
	background: var(--cf-bg-alt);
	font-family: inherit;
	transition: all 0.15s;
	width: 100%;
}
.cfk-field input:focus,
.cfk-field select:focus {
	outline: none;
	border-color: var(--cf-cyan);
	background: var(--cf-bg);
	box-shadow: 0 0 0 4px rgba(0, 158, 227, 0.12);
}
.cfk-field input::placeholder { color: #A5ADB7; }
.cfk-field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6472' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	padding-right: var(--cf-s-10);
}

.cfk-check {
	display: flex;
	align-items: flex-start;
	gap: var(--cf-s-3);
	font-size: var(--cf-text-12);
	color: var(--cf-text-muted);
	line-height: 1.5;
	cursor: pointer;
	margin-bottom: var(--cf-s-5);
	user-select: none;
}
.cfk-check input { display: none; }
.cfk-check-box {
	width: 16px;
	height: 16px;
	border: 1.5px solid #C4CAD1;
	border-radius: 4px;
	flex-shrink: 0;
	position: relative;
	transition: all 0.12s;
	margin-top: 2px;
}
.cfk-check input:checked + .cfk-check-box {
	background: var(--cf-primary);
	border-color: var(--cf-primary);
}
.cfk-check input:checked + .cfk-check-box::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 0;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.cfk-check a {
	color: var(--cf-cyan);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cfk-form-actions { display: flex; }
.cfk-btn--block {
	width: 100%;
	justify-content: center;
}
.cfk-btn.is-loading { opacity: 0.6; pointer-events: none; }

.cfk-form-status {
	margin-top: var(--cf-s-3);
	font-size: var(--cf-text-13);
	min-height: 18px;
	color: var(--cf-text-muted);
	text-align: center;
}
.cfk-form-status--err { color: var(--cf-red); font-weight: var(--cf-w-semi); }

.cfk-form-ok {
	text-align: center;
	padding: var(--cf-s-4) 0 var(--cf-s-2);
}
.cfk-form-ok svg { margin: 0 auto var(--cf-s-3); display: block; }
.cfk-form-ok h3 {
	font-size: var(--cf-text-20);
	font-weight: var(--cf-w-black);
	color: var(--cf-primary);
	margin: 0 0 var(--cf-s-2);
}
.cfk-form-ok p {
	font-size: var(--cf-text-14);
	color: var(--cf-text-muted);
	margin: 0;
}

@media (max-width: 560px) {
	.cfk-modal { padding: var(--cf-s-3); }
	.cfk-modal-card { padding: var(--cf-s-8) var(--cf-s-6) var(--cf-s-6); border-radius: var(--cf-radius-lg); }
	.cfk-modal-title { font-size: var(--cf-text-20); }
}

/* ====== RESPONSIVE (global) ====== */
@media (max-width: 900px) {
	.cfk-hero { padding: var(--cf-s-8) var(--cf-s-5) var(--cf-s-10); }
	.cfk-hero-side { order: 2; }
	.cfk-hero-copy { order: 1; }

	/* Tighter H1 */
	.cfk-hero-h1 {
		font-size: clamp(var(--cf-text-24), 6vw, var(--cf-text-40));
		margin: var(--cf-s-3) 0 var(--cf-s-3);
		letter-spacing: -0.8px;
	}

	/* Shorter lede */
	.cfk-hero-lede {
		font-size: var(--cf-text-14);
		margin-bottom: var(--cf-s-5);
		line-height: 1.5;
	}

	/* Bullets — hide sub-text, keep only bold line */
	.cfk-hero-bullets {
		margin-bottom: var(--cf-s-6);
		gap: 0;
	}
	.cfk-hero-bullets li {
		padding: var(--cf-s-2) 0;
		gap: var(--cf-s-2);
	}
	.cfk-hero-bullets span { display: none; }
	.cfk-hero-bullets b {
		font-size: var(--cf-text-13);
		margin-bottom: 0;
	}
	.cfk-b-ic { width: 16px; height: 16px; }

	/* CTA — tighter */
	.cfk-hero-cta { gap: var(--cf-s-3); margin-bottom: 0; }
	.cfk-btn { padding: var(--cf-s-3) var(--cf-s-5); }
	.cfk-btn small { display: none; }

	/* Trust — single line */
	.cfk-hero-trust {
		gap: var(--cf-s-3) var(--cf-s-5);
		padding-top: var(--cf-s-4);
	}
	.cfk-trust-item { font-size: var(--cf-text-11); }

	/* Scroll hint — push below content */
	.cfk-hero-scroll {
		position: relative;
		bottom: auto;
		left: auto;
		transform: none;
		margin: var(--cf-s-8) auto 0;
	}
}
@media (max-width: 560px) {
	.cfk-hero-stats { grid-template-columns: repeat(3, 1fr); gap: var(--cf-s-2); }
	.cfk-stat + .cfk-stat { padding-left: var(--cf-s-3); }
	.cfk-hero-cta { flex-direction: column; align-items: stretch; }
	.cfk-btn { justify-content: center; }
	.cfk-preview-grid { grid-template-columns: repeat(3, 1fr); }

	/* Eyebrow smaller */
	.cfk-hero-eyebrow { font-size: var(--cf-text-10); }
}
@media (max-width: 440px) {
	.cfk-preview-grid { grid-template-columns: 1fr 1fr; }
}