/* =========================================
   [Global & Hero Styles - PRESERVED] 
   ========================================= */
:root {
	--brand-blue: #2563eb;
	--highlight-text: #2E6FF2;
	--accent: #D7E4FF;
	--brand-dark: #0f172a;
	--accent-cyan: #22d3ee;
	--text-main: #f8fafc;
	--text-sub: #94a3b8;
	--bg-dark: #020617;
	
	--card-bg: rgba(30, 41, 59, 0.4);
	--card-border: rgba(255, 255, 255, 0.08);
	--card-hover-bg: rgba(30, 41, 59, 0.6);
	--card-hover-border: rgba(34, 211, 238, 0.3);

	/* [New Typography Scale - Mobile Friendly] */
	--font-h1: clamp(2.2rem, 5vw, 3.8rem);
	--font-h2: clamp(1.8rem, 3.5vw, 2.8rem);
	--font-h3: clamp(1.3rem, 2.5vw, 1.75rem);
	--font-body: clamp(1rem, 1.2vw, 1.125rem);
	--font-sub: clamp(0.9rem, 1.1vw, 1rem);

	/* [Added Variables for New Section] */
	--bg-light: #f8fafc; 
	--card-bg-solid-new: #1e293b;  
	--primary-blue-new: #60a5fa; 
	--text-white-new: #ffffff;
	--highlight-bg: rgba(37, 99, 235, 0.15);
	--error-red: #f43f5e;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

/* Consistent Typography Classes (New) */
h1, .h1 {line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
h2, .h2 {line-height: 1.35; letter-spacing: -0.015em; font-weight: 600; }
h3, .h3 {line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
p, .body-text {line-height: 1.65; letter-spacing: -0.01em; }

/* Hero Background - Dark Theme */
.section-hero-bg {
	background: radial-gradient(circle at 50% 30%, rgba(29, 78, 216, 0.15) 0%, transparent 50%),
				linear-gradient(180deg, #020617 0%, #0f172a 100%);
	background-attachment: fixed;
	position: relative;
}

.section-hero-bg::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-image: 
		radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px),
		radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px),
		radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 3px);
	background-size: 550px 550px, 350px 350px, 250px 250px;
	background-position: 0 0, 40px 60px, 130px 270px;
	opacity: 0.3;
	pointer-events: none;
}

.text-brand-blue { color: #60a5fa; }
.card-shadow { box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5), 0 18px 36px -18px rgba(0, 0, 0, 0.4); }
.btn-transition { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-hover-scale:hover { transform: scale(1.05); }

.highlight-blue {
	position: relative;
	display: inline-block;
	z-index: 1;
}
.highlight-blue::after {
	content: '';
	position: absolute;
	bottom: 4px;
	left: 0;
	width: 0;
	height: 40%;
	background-color: rgba(37, 99, 235, 0.3);
	z-index: -1;
	animation: highlight-draw 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards 0.8s;
}
@keyframes highlight-draw { from { width: 0; } to { width: 100%; } }

/* Slider Animations */
@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-50% - 16px)); }
}
.slider-container {
	width: 100%; overflow: hidden;
	mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.slider-track {
	display: flex; gap: 32px;
	animation: scroll 85s linear infinite; 
	width: max-content; padding: 50px 0;
}
.slider-track:hover { animation-play-state: paused; }

.card-item {
	width: 380px; flex-shrink: 0;
	background: rgba(30, 41, 59, 0.7);
	backdrop-filter: blur(12px);
	border-radius: 40px; padding: 36px;
	height: 460px; display: flex; flex-direction: column;
	border: 1px solid rgba(255,255,255,0.1);
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
	position: relative; overflow: hidden;
}
.card-item h3 { color: white !important; }
.card-item:hover { transform: translateY(-16px) scale(1.02); border-color: #3b82f6; box-shadow: 0 0 30px rgba(37, 99, 235, 0.3); }

.chart-bar { animation: growUp 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* [NEW STYLES FOR HERO CARDS] */
.hero-card-1-bg {
	background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
}
.hero-card-2-bg {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* Rocket Animation */
.rocket-float {
	animation: rocketFloat 3s ease-in-out infinite;
}
@keyframes rocketFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-15px) rotate(2deg); }
}
.rocket-fire {
	width: 8px; height: 8px; background: #fbbf24; border-radius: 50%;
	margin: 5px auto 0; 
	box-shadow: 0 0 10px #f59e0b;
	animation: fireBurn 0.1s infinite alternate;
}
@keyframes fireBurn {
	from { opacity: 0.6; transform: scale(1); }
	to { opacity: 1; transform: scale(1.5); }
}

/* Server/Data Animation */
.server-blink {
	animation: blinkLight 1.5s infinite;
}
.server-blink-fast {
	animation: blinkLight 0.5s infinite;
}
@keyframes blinkLight {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; box-shadow: 0 0 8px currentColor; }
}
.data-stream {
	background: linear-gradient(to bottom, transparent, #22d3ee, transparent);
	opacity: 0.1;
	animation: streamFlow 2s linear infinite;
}
@keyframes streamFlow {
	from { transform: translateY(-100%); }
	to { transform: translateY(100%); }
}

.text-content-wrapper { transition: opacity 0.6s ease, transform 0.6s ease; }
.text-content-wrapper.fade-out { opacity: 0; transform: translateY(-10px); }
.text-content-wrapper.fade-in { opacity: 0; transform: translateY(10px); }

/* Category Menu & Sticky Nav */
.category-nav-strip {
	background: #0f172a;
	border-bottom: 1px solid #1e293b;
	position: sticky; top: 88px; z-index: 30;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}
.nav-strip-container {
	max-width: 1400px; margin: 0 auto;
	display: flex; justify-content: center; align-items: center;
	padding: 0 20px; overflow-x: auto;
}
.nav-link {
	padding: 20px 24px;
	color: #94a3b8; font-weight: 600; font-size: 15px;
	cursor: pointer; position: relative;
	white-space: nowrap; transition: color 0.3s ease;
}
.nav-link::after {
	content: '';
	position: absolute;
	left: 50%; bottom: 12px;
	width: 0; height: 2px;
	background-color: #60a5fa;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transform: translateX(-50%);
}
.nav-link:hover, .nav-link.active { color: #60a5fa; }
.nav-link:hover::after, .nav-link.active::after { width: 80%; }

/* Banner */
.inquiry-banner {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
	color: white;
	padding: 50px 20px; text-align: center;
	position: relative; overflow: hidden;
}
.banner-grid-overlay {
	position: absolute; inset: 0;
	background-image: 
		linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
	background-size: 30px 30px;
	pointer-events: none;
	z-index: 1;
}

/* Decorative Background Elements */
.deco-icon {
	position: absolute;
	font-size: 80px; 
	opacity: 0.9; 
	filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
	z-index: 2;
	pointer-events: none;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.clap-icon {
	left: 10%; top: 20%;
	transform: rotate(-20deg);
	animation: float 3s ease-in-out infinite;
}
.leave-icon {
	right: 10%; bottom: 10%;
	transform: rotate(10deg);
	animation: runOut 4s linear infinite;
	font-size: 90px;
}
.doc-icon {
	left: 50%; top: -30px;
	font-size: 60px;
	opacity: 0.7;
	transform: translateX(-50%) rotate(5deg);
	animation: float 5s ease-in-out infinite;
}

.confetti-piece {
	position: absolute; width: 10px; height: 10px; background: rgba(255,255,255,0.2);
	animation: confetti-fall 4s linear infinite;
	z-index: 0;
}
@keyframes confetti-fall { 
	0% { transform: translateY(-50px) rotate(0deg); opacity: 0; }
	20% { opacity: 1; }
	100% { transform: translateY(200px) rotate(360deg); opacity: 0; }
}
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-15px) rotate(5deg); } }
@keyframes runOut {
	0% { transform: translateX(0) rotate(5deg); opacity: 0.8; }
	50% { transform: translateX(20px) rotate(15deg); opacity: 1; }
	100% { transform: translateX(40px) rotate(5deg); opacity: 0.8; }
}

.inquiry-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.inquiry-btn {
	background: white; color: #1d4ed8; font-weight: 600;
	padding: 12px 32px; border-radius: 100px; font-size: 16px;
	transition: transform 0.2s, box-shadow 0.2s;
	display: inline-flex; align-items: center; gap: 8px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.inquiry-btn:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

/* Risk Alert */
.highlight {
	position: relative;
	display: inline-block;
	z-index: 1;
}
.highlight::after {
	content: '';
	position: absolute;
	left: 0; bottom: 4px; width: 100%; height: 18px;
	background-color: var(--accent);
	opacity: 1;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
	z-index: -1;
}
.highlight.active::after { transform: scaleX(1); }

.risk-item {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 16px; background: rgba(255, 255, 255, 0.05);
	border-radius: 16px; margin-bottom: 16px;
}
.standard-item {
	display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px;
}
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform, opacity;
}
.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* [UPDATED for new slider] Visual Slider Styles */
.highlight-stroke {
	position: relative;
	display: inline-block;
	z-index: 1;
	color: #2E6FF2;
}
.highlight-stroke::after {
	content: none;
	position: absolute;
	bottom: 6px; left: 0; width: 0; height: 18px;
	background-color: rgba(46, 111, 242, 0.15);
	z-index: -1;
	transition: width 1s cubic-bezier(0.65, 0, 0.35, 1);
}
.highlight-stroke.highlight-active::after { width: 100%; }

.comparison-wrapper { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; }
.comparison-container { 
	position: relative; width: 100%; height: 600px;
	border-radius: 24px; overflow: hidden;
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.12);
	background: #f3f4f6; cursor: col-resize; user-select: none;
	margin-bottom: 32px;
}
.image-layer {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background-size: cover; background-position: center;
	transition: filter 0.5s ease;
}
.image-after { clip-path: inset(0 0 0 50%); z-index: 2; }
.slider-handle {
	position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
	background: rgba(255, 255, 255, 0.8); z-index: 20;
	transform: translateX(-50%); pointer-events: none;
}
.slider-handle::after {
	content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 48px; height: 48px; background: white; border-radius: 50%;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M8 7l-5 5m0 0l5 5m-5-5h18m-5-5l5 5m0 0l-5 5'/%3E%3C/svg%3E");
	background-size: 20px; background-repeat: no-repeat; background-position: center;
}

/* Updated Caption Pulse */
.click-caption {
	display: inline-block;
	margin-bottom: 64px; /* Updated spacing */
	padding: 10px 28px;
	background: rgba(37, 99, 235, 0.08);
	color: #2563eb;
	font-size: 15px;
	font-weight: 600;
	border-radius: 50px;
	border: 1px solid rgba(37, 99, 235, 0.15);
	animation: captionPulse 2s infinite;
}
@keyframes captionPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3); } 70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } }

.detail-overlay {
	position: absolute; inset: 0; z-index: 50;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.comparison-container.active-before .image-before { filter: blur(20px) brightness(0.7); }
.comparison-container.active-before .overlay-before { opacity: 1; pointer-events: auto; backdrop-filter: blur(10px); }
.comparison-container.active-after .image-after { filter: blur(20px) brightness(0.7); }
.comparison-container.active-after .overlay-after { opacity: 1; pointer-events: auto; backdrop-filter: blur(10px); }

/* Updated Detail Card for Portfolio Slider */
.detail-card {
	background: white; padding: 40px; border-radius: 24px;
	width: 90%; max-width: 520px;
	box-shadow: 0 30px 60px rgba(0,0,0,0.2);
	transform: translateY(20px); transition: transform 0.5s ease; text-align: left;
}
.comparison-container[class*="active-"] .detail-card { transform: translateY(0); }

/* New Info Tags */
.info-tag {
	display: inline-block; font-size: 11px; font-weight: 600;
	padding: 3px 8px; border-radius: 4px; margin-bottom: 6px;
	text-transform: uppercase;
}
.tag-red { background: #fee2e2; color: #dc2626; }
.tag-blue { background: #dbeafe; color: #2563eb; }

.dot-nav { display: flex; justify-content: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: #e5e7eb; cursor: pointer; transition: all 0.3s ease;
}
.dot.active { width: 30px; border-radius: 5px; background: #2563eb; }

/* Object Grid Styles */
.hero-header-container {
	width: 100%; padding: 120px 24px 0;
	text-align: center; background-color: var(--bg-color);
	position: relative;
}
.hero-header-container h2 {
	font-weight: 600; color: #111;
	margin-bottom: 24px; line-height: 1.3; letter-spacing: -0.02em;
}
.hero-header-container p {
	font-weight: 400; color: #64748b;
	line-height: 1.6; max-width: 800px; margin: 0 auto;
}

.highlight-animated { position: relative; z-index: 1; display: inline-block; color: var(--brand-blue); }
.highlight-animated::after {
	content: none; position: absolute; left: -4px; bottom: 6px; 
	width: 0%; padding: 0 4px; height: 18px; 
	background-color: rgba(37, 99, 235, 0.15); z-index: -1;
	animation: highlightStroke 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: 0.5s; border-radius: 4px;
}
@keyframes highlightStroke { to { width: 100%; } }

.content-section { padding: 0 24px 0; max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; }
.card-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 24px; }
@media (min-width: 768px) {
	.card-grid { grid-template-columns: repeat(2, 1fr); }
	.highlight-stroke::after {content:'';}
	.highlight-animated::after {content:'';}
} 
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

/* [UPDATED] Single Card Styles from New Code */
.single-card {
	background: var(--card-bg-solid-new); 
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 24px; 
	padding: 40px 32px; 
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); 
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex; flex-direction: column; 
	position: relative;
	overflow: hidden;
	z-index: 1;
}
/* Pseudo-element for hover effect (Fixes flicker) */
.single-card::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 1)); 
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: -1;
}

.single-card:hover { transform: translateY(-8px); border-color: rgba(34, 211, 238, 0.4); }
.single-card:hover::before { opacity: 1; }

.card-title { font-size: 22px; font-weight: 600; color: #ffffff; margin-bottom: 12px; line-height: 1.35; transition: color 0.3s; }
.single-card:hover .card-title { color: var(--accent-cyan); }
.card-desc { font-size: 15px; color: #94a3b8; line-height: 1.6; word-break: keep-all; }

.card-keyword { 
	display: inline-block; 
	padding: 6px 12px; 
	border-radius: 100px; 
	font-size: 12px; 
	font-weight: 600; 
	background: rgba(37, 99, 235, 0.2); 
	color: var(--primary-blue-new); 
	border: 1px solid rgba(37, 99, 235, 0.3); 
	margin-bottom: 20px; 
	width: fit-content;
	text-transform: uppercase;
}

.card-object-area {
	width: 100%; 
	height: 160px; /* Updated height */
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 20px; 
	margin-bottom: 24px;
	display: flex; align-items: center; justify-content: center; position: relative;
	overflow: hidden;
}

/* --- New Animations for 6 Cards --- */

/* Card 1: Time */
.obj-time-wrap { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }
.obj-gear-outer { position: absolute; width: 100%; height: 100%; border: 2px dashed rgba(96, 165, 250, 0.3); border-radius: 50%; animation: rotateCW 12s linear infinite; }
.obj-time-main { width: 50px; height: 50px; border: 3px solid var(--primary-blue-new); border-radius: 50%; position: relative; background: rgba(96, 165, 250, 0.05); }
.obj-time-main::after { content: ''; position: absolute; width: 3px; height: 20px; background: var(--accent-cyan); top: 5px; left: 21px; transform-origin: bottom; animation: rotateCW 1.5s linear infinite; border-radius: 2px; }
.panic-emoji-time {
	position: absolute;
	top: -10px;
	right: -10px;
	font-size: 24px;
	animation: emojiShake 0.5s infinite alternate;
	filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

/* Card 2: Save */
.obj-save-wrap { position: relative; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; }
.obj-radar { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 0deg, var(--primary-blue-new), transparent 40%); opacity: 0.2; animation: rotateCW 3s linear infinite; }
.obj-save-icon { font-size: 36px; color: var(--primary-blue-new); z-index: 2; filter: drop-shadow(0 0 10px var(--primary-blue-new)); animation: pulseGlow 1.5s ease-in-out infinite; }

/* Card 3: 관리 리소스 (Management Systemized Chaos) */
.obj-management-system {
	position: relative;
	width: 160px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.chaos-manager-fixed {
	font-size: 36px;
	z-index: 20;
	animation: managerVibe 2s infinite ease-in-out;
}
.orbit-visual-svg {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.2;
}
.orbit-path {
	fill: none;
	stroke: var(--primary-blue-new);
	stroke-width: 1;
	stroke-dasharray: 3;
}
.task-container {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.task-icon {
	position: absolute;
	font-size: 18px;
	filter: drop-shadow(0 0 5px rgba(0,0,0,0.3));
}
/* 각 테스크별 겹치지 않는 반지름과 느린 속도 설정 */
.t-icon-1 { animation: rotateLane1 8s linear infinite; }
.t-icon-2 { animation: rotateLane2 12s linear infinite reverse; }
.t-icon-3 { animation: rotateLane3 10s linear infinite; }
.t-icon-4 { animation: rotateLane4 15s linear infinite reverse; }

@keyframes rotateLane1 { from { transform: rotate(0deg) translateX(35px) rotate(0deg); } to { transform: rotate(360deg) translateX(35px) rotate(-360deg); } }
@keyframes rotateLane2 { from { transform: rotate(45deg) translateX(50px) rotate(-45deg); } to { transform: rotate(405deg) translateX(50px) rotate(-405deg); } }
@keyframes rotateLane3 { from { transform: rotate(180deg) translateX(65px) rotate(-180deg); } to { transform: rotate(540deg) translateX(65px) rotate(-540deg); } }
@keyframes rotateLane4 { from { transform: rotate(270deg) translateX(42px) rotate(-270deg); } to { transform: rotate(630deg) translateX(42px) rotate(-630deg); } }

@keyframes managerVibe { from { transform: scale(1); } to { transform: scale(1.1); } }

/* Card 4: 느린 실행력 */
.obj-launch-area { position: relative; width: 150px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.rocket-container {
	position: absolute;
	bottom: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: rocketRiseFallWithColor 4s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.rocket-icon { font-size: 40px; }
.rocket-flame {
	position: absolute;
	bottom: -16px; 
	left: 50%;
	transform: translateX(-50%);
	width: 16px;
	height: 28px;
	background: linear-gradient(to bottom, #fbbf24, #f59e0b, transparent);
	clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
	filter: blur(0.5px);
	opacity: 0;
	animation: flameControlSync 4s infinite;
}

/* Card 5: Knowledge */
.obj-know-wrap { position: relative; width: 70px; height: 70px; }
.know-doc { position: absolute; width: 20px; height: 26px; background: rgba(167, 139, 250, 0.4); border: 1px solid rgba(167, 139, 250, 0.8); border-radius: 2px; }
.know-doc:nth-child(1) { top: 0; left: 0; animation: mergeDoc1 3s infinite; }
.know-doc:nth-child(2) { top: 0; right: 0; animation: mergeDoc2 3s infinite; }
.know-doc:nth-child(3) { bottom: 0; left: 0; animation: mergeDoc3 3s infinite; }
.know-doc:nth-child(4) { bottom: 0; right: 0; animation: mergeDoc4 3s infinite; }
.know-center { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; background: #a78bfa; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 15px #a78bfa; opacity: 0; animation: centerPop 3s infinite; }

/* Card 6: 수정의 굴레 */
.obj-revision-area { position: relative; width: 160px; height: 120px; display: flex; align-items: center; justify-content: center; gap: 15px; }
.center-doc-fixed { font-size: 42px; z-index: 5; filter: drop-shadow(0 0 15px rgba(255,255,255,0.1)); }
.version-slot {
	height: 24px;
	overflow: hidden;
	background: rgba(37, 99, 235, 0.1);
	border: 1px solid rgba(37, 99, 235, 0.3);
	border-radius: 6px;
	padding: 0 8px;
	position: absolute;
	top: 20px;
	right: 10px;
}
.version-list {
	display: flex;
	flex-direction: column;
	animation: slotScroll 5s infinite cubic-bezier(0.65, 0, 0.35, 1);
}
.version-item {
	height: 22px;
	font-size: 10px;
	color: var(--primary-blue-new);
	font-weight: 600;
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.feedback-pop {
	position: absolute;
	left: 0;
	bottom: 20px;
	background: var(--error-red);
	color: white;
	font-size: 9px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 8px 8px 8px 0;
	opacity: 0;
	transform: scale(0.5);
	animation: feedbackPopAnim 5s infinite;
}

/* Keyframes Global */
@keyframes rotateCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulseGlow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } }
@keyframes emojiShake { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }

@keyframes rocketRiseFallWithColor {
	0% { transform: translate(-50%, 0); filter: grayscale(0) brightness(1); animation-timing-function: ease-out; }
	25% { transform: translate(-50%, -70px); filter: grayscale(0) brightness(1.2) drop-shadow(0 0 15px var(--primary-blue-new)); }
	35% { transform: translate(-50%, -70px); filter: grayscale(1) brightness(0.45); }
	45% { transform: translate(-50%, 0) scaleY(0.85); filter: grayscale(1) brightness(0.4); }
	55% { transform: translate(-50%, 0) scaleY(1); filter: grayscale(1) brightness(0.4); }
	100% { transform: translate(-50%, 0); filter: grayscale(0) brightness(1); }
}
@keyframes flameControlSync {
	0% { opacity: 0; height: 0; }
	5% { opacity: 1; height: 20px; transform: translateX(-50%) scaleX(1.1); }
	25% { opacity: 1; height: 35px; transform: translateX(-50%) scaleX(1); }
	30% { opacity: 0; height: 0; }
	100% { opacity: 0; }
}

/* Card 5 Knowledge Logic */
@keyframes mergeDoc1 { 0% { transform: translate(0, 0); opacity: 0.5; } 40%, 70% { transform: translate(25px, 22px) rotate(45deg); opacity: 0; } 100% { transform: translate(0, 0); opacity: 0.5; } }
@keyframes mergeDoc2 { 0% { transform: translate(0, 0); opacity: 0.5; } 40%, 70% { transform: translate(-25px, 22px) rotate(-45deg); opacity: 0; } 100% { transform: translate(0, 0); opacity: 0.5; } }
@keyframes mergeDoc3 { 0% { transform: translate(0, 0); opacity: 0.5; } 40%, 70% { transform: translate(25px, -22px) rotate(-45deg); opacity: 0; } 100% { transform: translate(0, 0); opacity: 0.5; } }
@keyframes mergeDoc4 { 0% { transform: translate(0, 0); opacity: 0.5; } 40%, 70% { transform: translate(-25px, -22px) rotate(-45deg); opacity: 0; } 100% { transform: translate(0, 0); opacity: 0.5; } }
@keyframes centerPop { 0%, 35% { transform: translate(-50%, -50%) scale(0) rotate(45deg); opacity: 0; } 45%, 65% { transform: translate(-50%, -50%) scale(1.2) rotate(45deg); opacity: 1; } 80%, 100% { transform: translate(-50%, -50%) scale(0) rotate(45deg); opacity: 0; } }

/* Card 6 Slot Logic */
@keyframes slotScroll {
	0%, 10% { transform: translateY(0); }
	20%, 30% { transform: translateY(-22px); }
	40%, 50% { transform: translateY(-44px); }
	60%, 70% { transform: translateY(-66px); }
	80%, 90% { transform: translateY(-88px); }
	100% { transform: translateY(0); }
}
@keyframes feedbackPopAnim {
	15%, 25%, 35%, 45%, 55%, 65%, 75%, 85% { opacity: 1; transform: scale(1) translateY(-5px); }
	0%, 10%, 30%, 50%, 70%, 90%, 100% { opacity: 0; transform: scale(0.5) translateY(0); }
}

/* [NEW Infinite Scroll for Tech Loop] */
.tech-loop-container {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	padding: 20px 0;
	mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.tech-loop-track {
	display: inline-flex;
	gap: 40px;
	animation: infiniteScrollRight 40s linear infinite; /* CHANGED DIRECTION */
}
@keyframes infiniteScrollRight {
	0% { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}
.tech-item {
	display: flex; align-items: center; gap: 10px;
	color: #94a3b8; font-weight: 600; font-size: 16px;
	background: rgba(15, 23, 42, 0.6); padding: 12px 24px;
	border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.1);
	white-space: nowrap;
}
.tech-item i, .tech-item svg { width: 20px; height: 20px; font-size: 20px; }

/* Comparison Card Updated */
.comparison-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); }

/* Mentoring / Process Section */
.mentoring-card {
	background: rgba(30, 41, 59, 0.5); border-radius: 16px;
	padding: 24px; border: 1px solid rgba(255,255,255,0.1);
	transition: all 0.3s ease; height: 100%; cursor: pointer;
	text-align: left;
}
.mentoring-card:hover, .mentoring-card.active { border-color: #60a5fa; background: #1e293b; }
.qna-box {
	background: #1e293b; border-radius: 16px; padding: 32px;
	display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
	border: 1px solid rgba(255,255,255,0.05); position: relative; height: 100%;
}
.q-icon, .a-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.q-icon { background: #ef4444; color: white; }
.a-icon { background: #3b82f6; color: white; }

/* New Image Placeholder in Q&A */
.img-placeholder {
	width: 100%; height: 200px; background: #334155;
	border-radius: 12px; margin-top: 16px;
	display: flex; align-items: center; justify-content: center;
	color: #94a3b8; border: 2px dashed rgba(255,255,255,0.1);
	flex-direction: column; gap: 8px; font-size: 14px;
}

/* Portfolio */
.pf-filter-btn {
    flex-shrink: 0;
	padding: 10px 24px; border-radius: 50px; background: #1e293b; border: 1px solid #334155;
	color: #94a3b8; font-weight: 600; font-size: 15px; transition: all 0.3s ease; cursor: pointer;
}
.pf-filter-btn:hover, .pf-filter-btn.active { background: #2563eb; color: white; border-color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
.pf-slider-container { overflow: hidden; width: 100%; padding: 20px 4px 20px; }
.pf-slider-track { display: flex; gap: 24px; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pf-card {
	min-width: 340px; width: 340px; background: white; border-radius: 24px; border: 1px solid #e2e8f0;
	overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0; display: flex; flex-direction: column;
}
.pf-card:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); border-color: #bfdbfe; }
.pf-card-img {     aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-bottom: 1px solid #f1f5f9; position: relative; overflow: hidden; }
.pf-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; text-align:left;}
.pf-cat-label { font-size: 11px; color: #2563eb; font-weight: 600; text-transform: uppercase; background: #eff6ff; padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; width: fit-content; }
.pf-title { font-size: 19px; font-weight: 600; color: #0f172a; margin-bottom: 8px; line-height: 1.4; word-break: keep-all; }
.pf-desc { font-size: 14px; color: #64748b; line-height: 1.5; word-break: keep-all; }
.pf-nav-btn {
	position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px;
	background: white; border: 1px solid #e2e8f0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; color: #1e293b;
	box-shadow: 0 10px 20px rgba(0,0,0,0.08); z-index: 20; cursor: pointer; transition: all 0.2s;
}
.pf-nav-btn:hover { background: #2563eb; color: white; border-color: #2563eb; transform: translateY(-50%) scale(1.1); }
.pf-nav-btn.prev { left: -26px; } .pf-nav-btn.next { right: -26px; }

.pf-more-btn {
	display: inline-flex; justify-content: center; align-items: center;
	background: rgba(30, 41, 59, 0.5); color: #94a3b8; border: 1px solid rgba(255,255,255,0.1);
	padding: 12px 24px; border-radius: 12px; font-weight: 600; cursor: pointer;
	transition: all 0.3s ease;
}
.pf-more-btn:hover { background: #2563eb; color: white; transform: translateY(-4px); }

/* Report Visual Resize */
.report-visual {
	background: rgba(15, 23, 42, 0.95); border-radius: 16px; padding: 24px;
	width: 100%; max-width: 400px !important; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
	position: absolute; right: -20px; bottom: -40px; transform: rotate(6deg);
	opacity: 0.8; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.4s ease;
}
.bento-card:hover .report-visual { transform: rotate(0deg) translateY(-20px) translateX(10px); opacity: 1; right: 20px; bottom: 20px; }

/* Roadmap Styles */
.roadmap-wrapper {
	--brand-highlight: rgba(186, 218, 255, 0.4); --bg-base: #ffffff; --bg-end: #f0f7ff;
	background: radial-gradient(circle at 50% 0%, var(--brand-highlight) 0%, transparent 50%), linear-gradient(to bottom, var(--bg-base) 0%, var(--bg-end) 100%);
	background-attachment: fixed; color: #1e293b; position: relative; overflow: hidden; width: 100%;
}
.highlight-text { position: relative; color: #1d4ed8; display: inline-block; z-index: 1; }
.highlight-text::after { content: ''; position: absolute; left: 0; bottom: 4px; width: 0; height: 18px; background: rgba(186, 218, 255, 0.4); z-index: -1; transition: width 1.2s 0.5s; }
.roadmap-wrapper.loaded .highlight-text::after { width: 100%; }

.category-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: space-between; gap: 10px; margin-bottom: 8px; z-index: 20; }

.roadmap-container { max-width: 1600px; margin: 0 auto; padding: 40px 0; min-height: 800px; display: flex; flex-direction: column; align-items: center; }
.tab-nav { display: flex; width: 100%; max-width: 1600px; justify-content: space-between; gap: 12px; margin-bottom: 32px; margin-top: 16px; }
.tab-btn { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: transparent; border: none; padding: 0; cursor: pointer; transition: all 0.3s; }
.tab-info { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 12px; transition: transform 0.3s; }
.tab-btn:hover .tab-info { transform: translateY(-2px); }
.tab-phase { font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; transition: color 0.3s; }
.tab-title { font-size: 15px; font-weight: 600; color: #64748b; transition: color 0.3s; white-space: nowrap; }
.tab-btn.active .tab-phase { color: #1d4ed8; } .tab-btn.active .tab-title { color: #0f172a; font-weight: 600; }
.line-track { width: 100%; height: 4px; background: #e2e8f0; position: relative; border-radius: 2px; overflow: hidden; }
.progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #1d4ed8; opacity: 0; border-radius: 2px; }
.tab-btn.active .progress-fill { opacity: 1; width: 0%; animation: progressFill 5s linear forwards; }
@keyframes progressFill { 0% { width: 0%; } 100% { width: 100%; } }

.content-display-area { width: 100%; min-height: 500px; position: relative; display: flex; justify-content: center; perspective: 1000px; }
.phase-content { display: none; width: 100%; justify-content: center; opacity: 0; transform: translateY(20px); transition: all 0.5s; }
.phase-content.active { display: flex; opacity: 1; transform: translateY(0); }

.phase-1-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; }
.diagnostic-card, .p2-card { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.6); width: 100%; max-width: 1600px; border-radius: 40px; padding: 40px ; position: relative; display: flex; align-items: center; box-shadow: 0 30px 60px -15px rgba(37, 99, 235, 0.15); transition: all 0.5s; }
.diagnostic-card:hover, .p2-card:hover { transform: translateY(-5px); box-shadow: 0 40px 80px -20px rgba(37, 99, 235, 0.25); }
.diagnostic-layout { display: flex; width: 100%; gap: 40px; align-items: center; }

.ax-card-object-rm, .p2-visual-object, .p4-visual-object { width: 50%; height: 280px; background: #ffffff; border-radius: 16px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; box-shadow: inset 0 0 20px rgba(0,0,0,0.03); flex-shrink: 0; }
.p2-visual-object { background: #f8fafc; border-color: #e2e8f0; }

.phase-content-area, .p2-text-area { flex: 1; text-align: left; }
.phase-badge, .p2-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; background-color: rgba(37, 99, 235, 0.1); color: #2563eb; font-size: 11px; font-weight: 600; text-transform: uppercase; margin-bottom: 16px; width: fit-content; }
.p2-badge { background-color: #eff6ff; }
.p2-highlight { color: #2563eb; }
.phase-desc, .p2-desc { font-size: 15px; color: #64748b; line-height: 1.6; margin-bottom: 32px; }
.check-list, .p2-check-list { display: flex; flex-direction: column; gap: 12px; }
.check-item, .p2-check-item { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #475569; background: #ffffff; padding: 14px 20px; border-radius: 16px; border: 1px solid #e2e8f0; }
.p2-check-item { background: #f8fafc; border-color: #f1f5f9; }
.check-icon-box, .p2-check-icon { width: 20px; height: 20px; background: #2563eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.p2-check-text { font-weight: 500; color: #334155; }

.premium-cta-card { background: linear-gradient(135deg, #1d4ed8 0%, #0f172a 100%); border-radius: 40px; position: relative; overflow: hidden; }
.premium-cta-card::before { content: ''; position: absolute; top: -20%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%); border-radius: 50%; }

.unified-badge { display: inline-block; padding: 6px 16px; border-radius: 9999px; background-color: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); color: #93c5fd; font-size: 14px; font-weight: 500; margin-bottom: 24px; }

.ambient-glow { position: absolute; width: 800px; height: 800px; background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, rgba(0, 0, 0, 0) 70%); border-radius: 50%; pointer-events: none; z-index: 0; top: -200px; left: 50%; transform: translateX(-50%); }

.bento-grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 0 24px; max-width: 1600px; margin: 0 auto; }
.bento-card { background: var(--card-bg); backdrop-filter: blur(12px); border: 1px solid var(--card-border); border-radius: 24px; padding: 32px 40px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.bento-card:hover { transform: translateY(-4px); border-color: var(--card-hover-border); background: var(--card-hover-bg); box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.2); }

@media (min-width: 1024px) {
	.bento-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(220px, auto); }
	.col-span-2 { grid-column: span 2; } .row-span-2 { grid-row: span 2; }
	.col-span-1 { grid-column: span 1; } .row-span-1 { grid-row: span 1; }
}

.bento-card .card-title { font-size: 24px; font-weight: 600; margin-bottom: 12px; color: white; line-height: 1.3; }
.card-title-lg { font-size: 34px; font-weight: 600; margin-bottom: 16px; color: white; line-height: 1.25; }
.bento-card .card-desc { font-size: 15px; color: var(--text-sub); line-height: 1.6; position: relative; z-index: 10; }
.card-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; background: rgba(37, 99, 235, 0.2); color: #60a5fa; border: 1px solid rgba(37, 99, 235, 0.3); margin-bottom: 16px; }

.tech-tag { background: rgba(30, 41, 59, 0.6); color: #93c5fd; padding: 6px 14px; border-radius: 100px; font-size: 13px; font-weight: 500; border: 1px solid rgba(148, 163, 184, 0.2); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; transition: all 0.2s; }
.tech-tag:hover { background: rgba(37, 99, 235, 0.2); border-color: rgba(37, 99, 235, 0.4); color: white; }

.btn-glow { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; padding: 14px 28px; border-radius: 12px; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3); }
.btn-glow:hover { opacity: 0.95; transform: scale(1.02); box-shadow: 0 8px 30px rgba(37, 99, 235, 0.5); }
.bg-gradient-highlight { background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(15, 23, 42, 0.4) 100%); border-color: rgba(37, 99, 235, 0.3); }

.window-header { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: rgba(0, 0, 0, 0.2); width: 100%; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-red { background: #ff5f57; } .dot-yellow { background: #febc2e; } .dot-green { background: #28c840; }

.ax-orbit-object { height: 240px; position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; z-index: 1; background: rgba(255, 255, 255, 0.05); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
.ax-core { width: 64px; height: 64px; background: linear-gradient(135deg, #2563eb, #60a5fa); border-radius: 20px; display: flex; justify-content: center; align-items: center; z-index: 30; box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4); color: white; font-weight: 600; font-size: 1.2rem; position: relative; }
.ax-core::after { content: ''; position: absolute; inset: -6px; border: 2px solid rgba(37, 99, 235, 0.3); border-radius: 24px; animation: pulseRing 3s infinite; }
@keyframes pulseRing { 0% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.orbit { position: absolute; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; }
.orbit-1 { width: 140px; height: 140px; animation: rotate 20s linear infinite; }
.orbit-2 { width: 210px; height: 210px; animation: rotate 40s linear reverse infinite; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.tool-node { position: absolute; width: 34px; height: 34px; background: white; border-radius: 10px; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.2); padding: 6px; }
.tool-node img { width: 100%; height: 100%; object-fit: contain; }
.orbit-1 .tool-node { animation: counter-rotate 20s linear infinite; }
.orbit-2 .tool-node { animation: counter-rotate-reverse 40s linear infinite; }
@keyframes counter-rotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes counter-rotate-reverse { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.editor-window { background: #0f172a; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); position: relative; font-family: 'Menlo', 'Monaco', 'Courier New', monospace; height: 180px; margin-bottom: 20px; overflow: hidden; display: flex; flex-direction: column; }
.code-area { padding: 20px; font-size: 13px; line-height: 1.6; color: #e2e8f0; flex: 1; }
.cursor { display: inline-block; width: 2px; height: 16px; background-color: #2563eb; animation: blink 1s infinite; vertical-align: middle; margin-left: 1px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes line-glow { 0% { background: transparent; } 50% { background: rgba(59, 130, 246, 0.15); border-left: 2px solid #3b82f6; } 100% { background: transparent; } }
.line-active { animation: line-glow 2s infinite; border-radius: 2px; margin-left: -10px; padding-left: 10px; }
.code-selection { background-color: rgba(37, 99, 235, 0.6) !important; color: white !important; border-radius: 2px; }
.code-keyword { color: #f472b6; font-weight: 600; }
.code-func { color: #60a5fa; }
.code-string { color: #4ade80; }
.line-num { color: #475569; margin-right: 12px; user-select: none; }

.ax-card-object { background: rgba(255, 255, 255, 0.05); border-radius: 16px; height: 220px; margin-bottom: 20px; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; width: 100%; }
.main-intelligence { position: relative; width: 180px; height: 140px; z-index: 5; display: flex; flex-direction: column; gap: 8px; margin: auto; padding-top:20px;}
.glass-panel { background: rgba(30, 41, 59, 0.8); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; }
.panel-base { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.panel-footer { height: 40px; background: rgba(15, 23, 42, 0.8); display: flex; align-items: center; justify-content: space-between; padding: 5px 12px; margin-top: 4px; }
.graph-container { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: auto; }
.graph-bar { flex: 1; background: linear-gradient(to top, #2563eb, #60a5fa); border-radius: 2px; height: 0; animation: growBar 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes growBar { from { height: 0; } to { height: var(--h); } }
.pm-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.pm-node { position: absolute; display: flex; flex-direction: column; align-items: center; opacity: 0; animation: pmIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.pm-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background-size: cover; background-color: #334155; }
.pm-bubble { background: #1e293b; color: #e2e8f0; padding: 4px 8px; border-radius: 8px; font-size: 9px; font-weight: 600; margin-bottom: 4px; position: relative; border: 1px solid rgba(255,255,255,0.05); }
.pm-bubble::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #1e293b; }
.p1 { top: 45px; left: 15px; animation-delay: 0.2s; }
.p2 { top: 45px; right: 15px; animation-delay: 0.8s; }
.p3 { bottom: 25px; left: 20px; animation-delay: 1.4s; }
@keyframes pmIn { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
.flow-line { position: absolute; stroke: #3b82f6; stroke-width: 1; fill: none; stroke-dasharray: 4; opacity: 0.2; animation: dash 30s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -1000; } }

.text-highlight { color: var(--accent-cyan); }
.custom-ax-visual { height: 200px; background: rgba(255, 255, 255, 0.05); border-radius: 20px; margin-bottom: 20px; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); }
.ax-scroll-container { padding-top: 40px; display: flex; flex-direction: column; gap: 10px; animation: infiniteScroll 20s linear infinite; z-index: 1; }
@keyframes infiniteScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 15px 15px 15px; }
.cat-item { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 10px; display: flex; align-items: center; gap: 8px; opacity: 0.5; transition: opacity 0.3s ease; }
.cat-icon { font-size: 14px; }
.cat-text { font-size: 11px; font-weight: 500; color: #94a3b8; }
.selected-floating-tag { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-4deg); background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 12px 20px; border-radius: 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); z-index: 30; white-space: nowrap; border: 1.5px solid rgba(255, 255, 255, 0.2); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.bento-card:hover .selected-floating-tag { transform: translate(-50%, -60%) rotate(0deg) scale(1.05); box-shadow: 0 20px 45px rgba(37, 99, 235, 0.45); }
.scroll-mask { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to top, rgba(15, 23, 42, 1), transparent); z-index: 5; pointer-events: none; }
.grid-icon { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.grid-dot { width: 4px; height: 4px; background: #3b82f6; border-radius: 1px; opacity: 0.8; }
.check-circle { width: 20px; height: 20px; background: #2563eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3); }
.custom-ax-visual .window-header { position: relative; z-index: 20; background: rgba(30, 41, 59, 1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

@media (max-width: 1024px) {
	.diagnostic-layout, .p2-card { flex-direction: column; gap: 20px; padding: 20px; }
	.ax-card-object-rm, .p2-visual-object, .p4-visual-object { width: 100%; height: 240px; }
	.roadmap-container { min-height: auto; }
	.tab-nav { flex-wrap: nowrap; overflow-x: auto; gap: 20px; width: 100%; padding-bottom: 10px; }
	.tab-btn { flex: 0 0 auto; min-width: 120px; }
	.category-nav { gap: 8px; width:100%;}
	.cat-btn { padding: 6px 14px; font-size: 12px; }
	.qna-box { flex-direction: column; }
	.slider-caption-area { flex-direction: column; gap: 12px; }
	.detail-card { padding: 32px; }
	.comparison-container { height: 450px; }
}

/* [REQUEST 2 ADDITIONS: New Slider Styles] */
/* 정방향 슬라이더 애니메이션 */
@keyframes scroll-logo {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* 역방향 슬라이더 애니메이션 */
@keyframes scroll-logo-reverse {
	0% { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}

.logo-slider-container {
	width: 100%;
	overflow: hidden;
	position: relative;
	background: transparent; /* Changed from #ffffff to fit dark theme */
	padding: 15px 0; /* Reduced padding */
}

/* 좌우 그라데이션 페이드 효과 - Adapted for dark theme */
.logo-slider-container::before, .logo-slider-container::after {
	content: "";
	height: 100%;
	position: absolute;
	width: 80px;
	z-index: 2;
	pointer-events: none;
}
.logo-slider-container::before {
	left: 0;
	top: 0;
	background: linear-gradient(to right, rgba(30, 41, 59, 1), transparent);
}
.logo-slider-container::after {
	right: 0;
	top: 0;
	background: linear-gradient(to left, rgba(30, 41, 59, 1), transparent);
}

.slide-track {
	display: flex;
	width: max-content;
	animation: scroll-logo 40s linear infinite;
}

.slide-track-reverse {
	display: flex;
	width: max-content;
	animation: scroll-logo-reverse 45s linear infinite;
}

.slide {
	flex: 0 0 auto;
	width: 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 0 25px;
}

.logo-box {
	font-size: 2.8rem;
	filter: grayscale(100%);
	opacity: 0.5; /* Increased opacity for dark theme visibility */
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo-name {
	font-size: 0.75rem;
	font-weight: 600;
	color: #94a3b8; /* Changed from #ccc to slate-400 */
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 0.3s ease;
}

.slide:hover .logo-box {
	filter: grayscale(0%);
	opacity: 1;
	transform: translateY(-8px) scale(1.1);
}

.slide:hover .logo-name {
	color: #e2e8f0; /* Lighter on hover */
	transform: translateY(-4px);
}

/* [NEW STYLES FOR HERO CARDS] */
.hero-card-1-bg {
	background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
}
.hero-card-2-bg {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* Rocket Animation */
.rocket-float {
	animation: rocketFloat 3s ease-in-out infinite;
}
@keyframes rocketFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-15px) rotate(2deg); }
}
.rocket-fire {
	width: 8px; height: 8px; background: #fbbf24; border-radius: 50%;
	margin: 5px auto 0; 
	box-shadow: 0 0 10px #f59e0b;
	animation: fireBurn 0.1s infinite alternate;
}
@keyframes fireBurn {
	from { opacity: 0.6; transform: scale(1); }
	to { opacity: 1; transform: scale(1.5); }
}

/* Server/Data Animation */
.server-blink {
	animation: blinkLight 1.5s infinite;
}
.server-blink-fast {
	animation: blinkLight 0.5s infinite;
}
@keyframes blinkLight {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; box-shadow: 0 0 8px currentColor; }
}
.data-stream {
	background: linear-gradient(to bottom, transparent, #22d3ee, transparent);
	opacity: 0.1;
	animation: streamFlow 2s linear infinite;
}
@keyframes streamFlow {
	from { transform: translateY(-100%); }
	to { transform: translateY(100%); }
}
.count-card {transition: all 0.5s;}
.count-card:hover {transform: translateY(-5px);}

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes slideUp { 0% { transform: translateY(100%); opacity: 0; } 20%, 80% { transform: translateY(0%); opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes scanVertical { 0% { top: -20%; } 100% { top: 120%; } }
@keyframes bugFixBg { 0%, 30% { background-color: #fee2e2; border-color: #fecaca; } 50%, 100% { background-color: #dcfce7; border-color: #bbf7d0; } }
@keyframes bugFixIcon { 0%, 30% { opacity: 1; transform: scale(1) rotate(0deg); } 40% { opacity: 0; transform: scale(0) rotate(45deg); } 100% { opacity: 0; } }
@keyframes checkShowIcon { 0%, 40% { opacity: 0; transform: scale(0); } 50%, 100% { opacity: 1; transform: scale(1); } }
@keyframes packetMove1 { 0% { cx: 40px; cy: 40px; opacity: 1; } 50% { cx: 128px; cy: 112px; opacity: 0; } 100% { cx: 40px; cy: 40px; opacity: 0; } }
@keyframes packetMove2 { 0% { cx: 40px; cy: 184px; opacity: 0; } 30% { cx: 40px; cy: 184px; opacity: 1; } 80% { cx: 128px; cy: 112px; opacity: 0; } 100% { cx: 40px; cy: 184px; opacity: 0; } }
@keyframes packetMove3 { 0% { cx: 216px; cy: 112px; opacity: 0; } 60% { cx: 216px; cy: 112px; opacity: 1; } 100% { cx: 128px; cy: 112px; opacity: 0; } }
@keyframes transferPackage { 0%, 10% { transform: translate(-70px, -20px); opacity: 0; } 20% { opacity: 1; transform: translate(-70px, -20px); } 50% { transform: translate(0px, -40px); } 80% { transform: translate(70px, -20px); opacity: 1; } 90%, 100% { transform: translate(70px, -20px); opacity: 0; } }