/* ── 히어로 ─────────────────────────────────── */
.hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 100px 24px 120px;
	position: relative;
	overflow: visible
}

.hero-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,40,26,.07) 0%, transparent 70%);
	pointer-events: none;
	overflow: hidden
}

	.hero-bg::before {
		content: '';
		position: absolute;
		top: 15%;
		left: 8%;
		width: 280px;
		height: 280px;
		background: radial-gradient(circle,rgba(232,40,26,.04) 0%,transparent 70%);
		border-radius: 50%;
		animation: float1 8s ease-in-out infinite
	}

	.hero-bg::after {
		content: '';
		position: absolute;
		bottom: 20%;
		right: 10%;
		width: 200px;
		height: 200px;
		background: radial-gradient(circle,rgba(232,40,26,.05) 0%,transparent 70%);
		border-radius: 50%;
		animation: float2 6s ease-in-out infinite
	}

@keyframes float1 {
	0%,100% {
		transform: translateY(0) scale(1)
	}

	50% {
		transform: translateY(-20px) scale(1.05)
	}
}

@keyframes float2 {
	0%,100% {
		transform: translateY(0) scale(1)
	}

	50% {
		transform: translateY(15px) scale(1.08)
	}
}

.hero-inner {
	max-width: 780px;
	position: relative;
	z-index: 1
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--red);
	background: var(--red-light);
	border: 1px solid var(--red-border);
	padding: 5px 14px;
	border-radius: 100px;
	margin-bottom: 24px
}

.hero-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--red);
	animation: pulse 2s infinite
}

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

	50% {
		opacity: .5;
		transform: scale(.8)
	}
}

.hero-title {
	font-size: clamp(36px,6vw,68px);
	font-weight: 900;
	letter-spacing: -.04em;
	line-height: 1.15;
	color: var(--text);
	margin-bottom: 20px
}

	.hero-title .highlight {
		background: linear-gradient(135deg,var(--red) 0%,#ff6b4a 50%,var(--red) 100%);
		background-size: 200% auto;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		animation: shine 3s ease infinite
	}

@keyframes shine {
	0% {
		background-position: 0% center
	}

	50% {
		background-position: 200% center
	}

	100% {
		background-position: 0% center
	}
}

.hero-desc {
	font-size: clamp(16px,2.2vw,20px);
	color: var(--text-4);
	line-height: 1.8;
	margin-bottom: 36px
}

.hero-btns {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap
}

.btn-hero-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: var(--red);
	padding: 14px 28px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	transition: all .2s;
	font-family: 'Noto Sans KR',sans-serif
}

	.btn-hero-primary:hover {
		background: var(--red-hover);
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(232,40,26,.3)
	}

.btn-hero-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-2);
	background: var(--surface);
	padding: 14px 28px;
	border-radius: 10px;
	border: 1.5px solid var(--border-md);
	cursor: pointer;
	transition: all .2s;
	font-family: 'Noto Sans KR',sans-serif
}

	.btn-hero-secondary:hover {
		border-color: var(--text-4);
		transform: translateY(-1px)
	}

.hero-note {
	margin-top: 20px;
	font-size: 12px;
	color: var(--text-6)
}

.hero-wave {
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	width: 100%;
	line-height: 0;
	z-index: 2
}

	.hero-wave svg {
		display: block;
		width: 100%;
		height: auto
	}


/* ── 제품 목업 (Product Preview) ──────────────── */
.preview-section {
	background: var(--bg);
	padding: 100px 24px 80px
}

.preview-inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center
}

.preview-title {
	font-size: clamp(24px,4vw,32px);
	font-weight: 900;
	color: var(--text);
	letter-spacing: -.03em;
	margin-bottom: 10px
}

.preview-sub {
	font-size: 15px;
	color: var(--text-3);
	margin-bottom: 48px
}

.mockup-wrapper {
	max-width: 900px;
	margin: 0 auto;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 80px rgba(0,0,0,.12);
	border: 1px solid var(--border)
}

.mockup-topbar {
	background: var(--surface-2);
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--border)
}

.mockup-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	flex-shrink: 0
}

	.mockup-dot.r {
		background: #FF5F57
	}

	.mockup-dot.y {
		background: #FEBC2E
	}

	.mockup-dot.g {
		background: #28C840
	}

.mockup-url {
	margin-left: 12px;
	flex: 1;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 4px 12px;
	font-size: 11px;
	color: var(--text-5);
	text-align: left
}

.mockup-body {
	display: grid;
	grid-template-columns: 180px 1fr 200px;
	min-height: 340px;
	background: var(--surface)
}

.mockup-sidebar {
	background: var(--surface-2);
	border-right: 1px solid var(--border);
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 2px
}

.mockup-sidebar-logo {
	font-size: 13px;
	font-weight: 900;
	color: var(--text);
	padding: 4px 16px 14px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 4px
}

	.mockup-sidebar-logo span {
		color: var(--red)
	}

.mockup-sidebar-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	font-size: 12px;
	color: var(--text-4);
	cursor: default;
	transition: background .15s
}

	.mockup-sidebar-item.active {
		background: var(--red-light);
		color: var(--red);
		font-weight: 700;
		border-right: 2px solid var(--red)
	}

	.mockup-sidebar-item svg {
		flex-shrink: 0
	}

.mockup-main {
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-align: left;
	border-right: 1px solid var(--border)
}

.mockup-main-label {
	font-size: 10px;
	font-weight: 700;
	color: var(--text-6);
	letter-spacing: .08em;
	text-transform: uppercase
}

.mockup-main-title-input {
	background: var(--surface-2);
	border: 1.5px solid var(--border-md);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--text)
}

.mockup-main-body {
	background: var(--surface-2);
	border: 1.5px solid var(--border-md);
	border-radius: 8px;
	padding: 14px;
	font-size: 12px;
	color: var(--text-4);
	line-height: 1.8;
	flex: 1
}

	.mockup-main-body .highlight-line {
		background: var(--red-light);
		border-left: 2px solid var(--red);
		padding: 2px 6px;
		margin: 4px -6px;
		border-radius: 0 4px 4px 0
	}

.mockup-panel {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--surface-3)
}

.mockup-panel-title {
	font-size: 10px;
	font-weight: 700;
	color: var(--text-6);
	letter-spacing: .08em;
	text-transform: uppercase
}

.mockup-panel-group {
	display: flex;
	flex-direction: column;
	gap: 4px
}

.mockup-panel-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-4)
}

.mockup-panel-bar {
	height: 6px;
	background: var(--surface-4);
	border-radius: 3px;
	overflow: hidden
}

.mockup-panel-bar-fill {
	height: 100%;
	border-radius: 3px;
	background: var(--red)
}

.mockup-panel-select {
	background: var(--surface);
	border: 1px solid var(--border-md);
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 11px;
	color: var(--text-3);
	display: flex;
	justify-content: space-between;
	align-items: center
}

.mockup-panel-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px
}

.mockup-panel-tag {
	font-size: 10px;
	font-weight: 600;
	color: var(--red);
	background: var(--red-light);
	border: 1px solid var(--red-border);
	padding: 2px 8px;
	border-radius: 100px
}

.mockup-panel-btn {
	background: var(--red);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 0;
	font-size: 12px;
	font-weight: 700;
	cursor: default;
	margin-top: auto;
	text-align: center
}

@media(max-width:760px) {
	.mockup-wrapper {
		transform: none;
		margin-bottom: 0
	}

	.mockup-body {
		grid-template-columns: 1fr
	}

	.mockup-sidebar, .mockup-panel {
		display: none
	}

	.mockup-main {
		border-right: none
	}
}

@media(max-width:480px) {
	.mockup-wrapper {
		transform: none;
		margin-bottom: 0
	}
}

/* ── 섹션 공통 ──────────────────────────────── */
section {
	padding: 80px 24px;
	overflow: hidden
}

.section-inner {
	max-width: 1100px;
	margin: 0 auto
}

.section-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--red);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 12px
}

.section-title {
	font-size: clamp(26px,4vw,40px);
	font-weight: 900;
	letter-spacing: -.03em;
	color: var(--text);
	margin-bottom: 14px;
	line-height: 1.25
}

.section-desc {
	font-size: 16px;
	color: var(--text-5);
	line-height: 1.75;
	max-width: 560px
}

/* ── 기능 카드 ──────────────────────────────── */
.features-section {
	background: var(--surface)
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 20px;
	margin-top: 48px
}

@media(max-width:860px) {
	.features-grid {
		grid-template-columns: 1fr
	}
}

.feat-card {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px;
	transition: all .2s;
	cursor: default
}

	.feat-card:hover {
		border-color: var(--red-border);
		transform: translateY(-3px);
		box-shadow: 0 12px 32px rgba(232,40,26,.08)
	}

.feat-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--red-light);
	border: 1px solid var(--red-border);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	color: var(--red)
}

.feat-title {
	font-size: 18px;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -.02em;
	margin-bottom: 8px
}

.feat-desc {
	font-size: 14px;
	color: var(--text-5);
	line-height: 1.75
}

.feat-tag {
	display: inline-block;
	margin-top: 14px;
	font-size: 11px;
	font-weight: 700;
	color: var(--red);
	background: var(--red-light);
	border: 1px solid var(--red-border);
	padding: 3px 10px;
	border-radius: 100px
}

/* ── 사용 방법 ──────────────────────────────── */
.how-section {
	background: var(--bg)
}

.how-steps {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	gap: 20px 8px;
	margin-top: 48px
}

@media(max-width:860px) {
	.how-steps {
		grid-template-columns: 1fr auto 1fr;
		gap: 16px 8px
	}
}

@media(max-width:480px) {
	.how-steps {
		grid-template-columns: 1fr;
		gap: 12px
	}
}

.how-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px 20px 24px;
	transition: all .2s
}

	.how-step:hover {
		border-color: var(--red-border);
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(232,40,26,.06)
	}

.how-num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	font-size: 16px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(232,40,26,.3)
}

.how-step-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 6px;
	letter-spacing: -.02em
}

.how-step-desc {
	font-size: 13px;
	color: var(--text-5);
	line-height: 1.7
}

.how-step-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--red);
	opacity: .4;
	align-self: center
}

@media(max-width:860px) {
	.how-step-arrow.row-break {
		display: none
	}
}

@media(max-width:480px) {
	.how-step-arrow {
		display: none
	}
}

/* ── 상세 설명 ──────────────────────────────── */
.detail-section {
	background: var(--surface)
}

.detail-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	margin-bottom: 80px
}

	.detail-row:last-child {
		margin-bottom: 0
	}

	.detail-row.reverse {
		flex-direction: row-reverse
	}

		.detail-row.reverse > *:first-child {
			order: 2
		}

		.detail-row.reverse > *:last-child {
			order: 1
		}

@media(max-width:760px) {
	.detail-row, .detail-row.reverse {
		grid-template-columns: 1fr;
		gap: 28px
	}

		.detail-row.reverse > *:first-child {
			order: 0
		}

		.detail-row.reverse > *:last-child {
			order: 0
		}
}

.detail-visual {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px;
	min-height: 260px;
	display: flex;
	flex-direction: column;
	gap: 14px
}

.detail-visual-title {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-6);
	letter-spacing: .08em;
	text-transform: uppercase
}

.detail-step-item {
	display: flex;
	align-items: flex-start;
	gap: 10px
}

.detail-step-dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--red);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 800;
	color: #fff;
	margin-top: 1px
}

.detail-step-text {
	font-size: 13px;
	color: var(--text-3);
	line-height: 1.6
}

	.detail-step-text strong {
		display: block;
		font-weight: 700;
		color: var(--text);
		margin-bottom: 2px
	}

.detail-input-mock {
	background: var(--surface);
	border: 1.5px solid var(--border-md);
	border-radius: 9px;
	padding: 12px 14px;
	font-size: 13px;
	color: var(--text-4)
}

	.detail-input-mock.typing::after {
		content: '|';
		animation: blink .8s infinite;
		color: var(--red)
	}

@keyframes blink {
	0%,100% {
		opacity: 1
	}

	50% {
		opacity: 0
	}
}

.detail-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 100px;
	margin-bottom: 10px
}

	.detail-badge.ai {
		color: var(--red);
		background: var(--red-light);
		border: 1px solid var(--red-border)
	}

	.detail-badge.done {
		color: var(--green);
		background: var(--green-light);
		border: 1px solid #bbf7d0
	}

/* ── 고객 후기 ──────────────────────────────── */
.testimonials-section {
	background: var(--surface);
	padding: 80px 0;
	overflow: hidden
}

.testimonials-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center
}

.testimonials-title {
	font-size: clamp(26px,4vw,40px);
	font-weight: 900;
	letter-spacing: -.03em;
	color: var(--text);
	margin-bottom: 10px;
	line-height: 1.25
}

.testimonials-sub {
	font-size: 16px;
	color: var(--text-3);
	margin-bottom: 48px
}

.testimonials-track-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	mask-image: linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
	-webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)
}

.testimonials-track {
	display: flex;
	gap: 24px;
	width: max-content;
	animation: marquee 40s linear infinite
}

	.testimonials-track:hover {
		animation-play-state: paused
	}

@keyframes marquee {
	0% {
		transform: translateX(0)
	}

	100% {
		transform: translateX(-50%)
	}
}

.testi-card {
	background: var(--bg);
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 2px 12px var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 220px;
	width: 340px;
	flex-shrink: 0;
	overflow: hidden
}

@media(max-width:768px) {
	.testi-card {
		padding: 22px 20px;
		min-height: auto;
		width: 300px
	}
}

.testi-quote-icon {
	font-size: 2rem;
	color: var(--red);
	opacity: .25;
	line-height: 1;
	font-family: Georgia,serif;
	flex-shrink: 0
}

.testi-text {
	font-size: 15px;
	color: var(--text-2);
	line-height: 1.8;
	flex: 1;
	word-break: keep-all;
	overflow-wrap: break-word
}

/* ── CTA 섹션 ───────────────────────────────── */
.cta-section {
	background: var(--red);
	padding: 80px 24px;
	text-align: center
}

.cta-inner {
	max-width: 640px;
	margin: 0 auto
}

.cta-title {
	font-size: clamp(26px,4vw,40px);
	font-weight: 900;
	color: var(--cta-text);
	letter-spacing: -.03em;
	line-height: 1.25;
	margin-bottom: 14px
}

.cta-desc {
	font-size: 16px;
	color: var(--cta-text-sub);
	line-height: 1.75;
	margin-bottom: 36px
}

.btn-cta-white {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--red);
	background: #fff;
	padding: 14px 32px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	transition: all .2s;
	font-family: 'Noto Sans KR',sans-serif
}

	.btn-cta-white:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(0,0,0,.15)
	}

.cta-note {
	margin-top: 16px;
	font-size: 12px;
	color: var(--cta-text-note)
}

/* ── 문의 섹션 ─────────────────────────────── */
.contact-section {
	background: var(--bg);
	padding: 80px 24px
}

.contact-box-simple {
	display: inline-flex;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px 40px;
	margin: 0 auto
}

.contact-box-row {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	justify-content: center
}

.contact-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--text-2);
	transition: color .15s
}

	.contact-item svg {
		color: var(--red);
		flex-shrink: 0
	}

	.contact-item:hover {
		color: var(--red)
	}

.contact-divider {
	width: 1px;
	height: 20px;
	background: var(--border-md)
}

@media(max-width:560px) {
	.contact-box-simple {
		padding: 24px 28px
	}

	.contact-box-row {
		flex-direction: column;
		gap: 16px
	}

	.contact-divider {
		width: 40px;
		height: 1px
	}
}

/* ── 푸터 ───────────────────────────────────── */
.footer {
	background: var(--surface-2);
	border-top: 1px solid var(--border);
	padding: 40px 24px
}

.footer-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px
}

.footer-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap
}

.footer-logo {
	font-size: 16px;
	font-weight: 900;
	color: var(--text)
}

	.footer-logo span {
		color: var(--red)
	}

	.footer-logo small {
		display: block;
		font-size: 12px;
		font-weight: 400;
		color: var(--text-6);
		margin-top: 4px
	}

.footer-links {
	display: flex;
	gap: 20px;
	flex-wrap: wrap
}

.footer-link {
	font-size: 13px;
	color: var(--text-5);
	transition: color .15s
}

	.footer-link:hover {
		color: var(--text)
	}

	.footer-link.bold {
		font-weight: 700;
		color: var(--text-4)
	}

.footer-copy {
	font-size: 12px;
	color: var(--text-7);
	padding-top: 16px;
	border-top: 1px solid var(--border)
}

/* ── 스크롤 애니메이션 ─────────────────────── */
.scroll-anim {
	opacity: 0;
	transition: opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)
}

	.scroll-anim.revealed {
		opacity: 1 !important;
		transform: none !important
	}

/* fade-up: 아래에서 위로 */
.anim-fade-up {
	transform: translateY(40px)
}

/* scale-up: 작게 시작해서 커지면서 등장 */
.anim-scale-up {
	transform: translateY(30px) scale(.92)
}

/* fade-in: 단순 페이드 */
.anim-fade-in {
	transform: translateY(0)
}

/* slide-left: 왼쪽에서 슬라이드 */
.anim-slide-left {
	transform: translateX(-60px)
}

/* slide-right: 오른쪽에서 슬라이드 */
.anim-slide-right {
	transform: translateX(60px)
}

/* how-num 팝 효과 */
@keyframes numPop {
	0% {
		transform: scale(.5);
		opacity: 0
	}

	60% {
		transform: scale(1.15)
	}

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

.how-num {
	opacity: 0
}

	.how-num.num-pop {
		animation: numPop .5s cubic-bezier(.4,0,.2,1) forwards
	}

/* 히어로 입장 애니메이션 */
@keyframes heroSlideUp {
	0% {
		opacity: 0;
		transform: translateY(30px)
	}

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

.hero-badge {
	animation: heroSlideUp .6s .1s cubic-bezier(.4,0,.2,1) both
}

.hero-title {
	animation: heroSlideUp .6s .25s cubic-bezier(.4,0,.2,1) both
}

.hero-desc {
	animation: heroSlideUp .6s .4s cubic-bezier(.4,0,.2,1) both
}

.hero-btns {
	animation: heroSlideUp .6s .55s cubic-bezier(.4,0,.2,1) both
}

.hero-note {
	animation: heroSlideUp .6s .65s cubic-bezier(.4,0,.2,1) both
}

/* 모션 감소 설정 존중 */
@media(prefers-reduced-motion:reduce) {