:root{
	--maxw: 1120px;

	--bg: #0b0c10;
	--fg: #f5f6f7;
	--muted: rgba(245,246,247,.72);
	--border: rgba(255,255,255,.14);

	--yellow: #FFC400;
	--yellow-2: #FFD84D;

	--radius: 18px;
	--radius2: 22px;

	--pad: 22px;
	--pad2: 28px;

	--shadow: 0 12px 34px rgba(0,0,0,.45);
	--shadow2: 0 18px 48px rgba(0,0,0,.52);

	--header-h: 72px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
	margin:0;
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
	background: var(--bg);
	color: var(--fg);
	line-height: 1.55;
	overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font: inherit; }
.skip{
	position:absolute;
	left:-9999px;
	top:auto;
	width:1px;height:1px;
	overflow:hidden;
}
.skip:focus{
	left: 12px;
	top: 12px;
	width:auto;height:auto;
	padding: 10px 12px;
	background: #111;
	border: 1px solid var(--border);
	border-radius: 10px;
	z-index: 9999;
}

.container{
	width: min(var(--maxw), calc(100% - 40px));
	margin: 0 auto;
}

.header{
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(10px);
	background: rgba(11,12,16,.62);
	border-bottom: 1px solid rgba(255,255,255,.10);
}
.header-inner{
	height: var(--header-h);
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 16px;
}

.brand{
	display:flex;
	align-items:center;
	gap: 10px;
	min-width: 140px;
}
.brand-mark{
	width: 42px;
	height: 42px;
	display:grid;
	place-items:center;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--yellow), var(--yellow-2));
	color: #111;
	font-weight: 900;
	letter-spacing: .5px;
	box-shadow: 0 10px 22px rgba(255,196,0,.18);
}
.brand-mark.sm{
	width: 34px;
	height: 34px;
	border-radius: 12px;
}
.brand-name{
	font-weight: 800;
	letter-spacing: .2px;
}

.nav{
	display:flex;
	align-items:center;
	gap: 16px;
}
.nav a{
	padding: 10px 10px;
	border-radius: 12px;
	color: rgba(245,246,247,.88);
}
.nav a:hover{
	background: rgba(255,255,255,.06);
	color: var(--fg);
}

.nav-toggle{
	display:none;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.04);
	padding: 10px;
}
.nav-toggle span{
	display:block;
	height: 2px;
	margin: 6px 0;
	background: rgba(245,246,247,.88);
	border-radius: 99px;
}

.mobile-nav{
	border-top: 1px solid rgba(255,255,255,.10);
	background: rgba(11,12,16,.84);
}
.mobile-nav-inner{
	padding: 14px 0 18px;
	display:grid;
	gap: 6px;
}
.mobile-nav a{
	padding: 12px 12px;
	border-radius: 14px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.10);
	color: rgba(245,246,247,.90);
}
.mobile-nav a:hover{
	border-color: rgba(255,196,0,.35);
}

.hero{
	position: relative;
	min-height: calc(100svh - var(--header-h));
}
.hero-slider{
	position: relative;
	min-height: calc(100svh - var(--header-h));
	overflow:hidden;
}
.hero-track{
	position: relative;
	height: calc(100svh - var(--header-h));
}
.hero-slide{
	position:absolute;
	inset:0;
	opacity:0;
	transform: scale(1.02);
	transition: opacity .55s ease, transform .75s ease;
}
.hero-slide.is-active{
	opacity:1;
	transform: scale(1.00);
}
.hero-slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.08) contrast(1.02);
}
.hero-overlay{
	position:absolute;
	inset:0;
	background:
		linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.10) 70%, rgba(0,0,0,.58) 100%),
		linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.55) 100%);
	display:flex;
	align-items:flex-end;
}
.hero-content{
	padding: 64px 0 74px;
	max-width: 720px;
}
.eyebrow{
	display:inline-block;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	color: rgba(245,246,247,.85);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.hero h1, .hero h2{
	margin: 0 0 12px;
	font-size: clamp(30px, 4.2vw, 54px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.hero .sub{
	margin: 0 0 22px;
	color: rgba(245,246,247,.80);
	font-size: 16px;
	max-width: 52ch;
}
.hero-cta{
	display:flex;
	flex-wrap: wrap;
	gap: 10px;
}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.04);
	color: rgba(245,246,247,.92);
	box-shadow: 0 10px 22px rgba(0,0,0,.26);
}
.btn:hover{
	border-color: rgba(255,196,0,.30);
	transform: translateY(-1px);
}
.btn:active{
	transform: translateY(0px);
}
.btn.primary{
	background: linear-gradient(135deg, var(--yellow), var(--yellow-2));
	border-color: rgba(255,196,0,.35);
	color: #111;
	font-weight: 800;
	box-shadow: 0 14px 34px rgba(255,196,0,.18);
}
.btn.ghost{
	background: rgba(255,255,255,.04);
}

.hero-controls{
	position:absolute;
	left:0; right:0;
	bottom: 18px;
}
.hero-controls-inner{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 16px;
}
.dots{
	display:flex;
	align-items:center;
	gap: 8px;
}
.dot{
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.35);
	background: rgba(255,255,255,.10);
	cursor:pointer;
}
.dot.is-active{
	width: 26px;
	background: rgba(255,196,0,.92);
	border-color: rgba(255,196,0,.92);
}
.control-buttons{
	display:flex;
	gap: 8px;
}
.icon-btn{
	width: 44px;
	height: 44px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.04);
	color: rgba(245,246,247,.92);
	cursor:pointer;
}
.icon-btn:hover{
	border-color: rgba(255,196,0,.30);
}

.hero-progress{
	position:absolute;
	left:0; right:0;
	bottom: 0;
	height: 3px;
	background: rgba(255,255,255,.10);
}
.hero-progress .bar{
	height: 100%;
	width: 0%;
	background: rgba(255,196,0,.95);
}

.section{
	padding: 84px 0;
}
.section.alt{
	background: rgba(255,255,255,.02);
	border-top: 1px solid rgba(255,255,255,.06);
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.section-head{
	margin-bottom: 22px;
}
.section-title{
	margin: 0 0 8px;
	font-size: clamp(22px, 2.6vw, 34px);
	letter-spacing: -0.02em;
}
.section-desc{
	margin: 0;
	color: var(--muted);
	max-width: 70ch;
}

.two-col{
	display:grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 26px;
	align-items: stretch;
}
.section-copy{
	display:flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
.section-media{
	display:flex;
	align-items: stretch;
}
.media-img{
	width:100%;
	height:100%;
	object-fit: cover;
	border-radius: var(--radius2);
	border: 1px solid rgba(255,255,255,.10);
	box-shadow: var(--shadow);
	min-height: 360px;
}

.stat-grid{
	display:grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.stat{
	border-radius: var(--radius);
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.03);
	padding: 14px 14px;
}
.stat .k{
	color: rgba(245,246,247,.72);
	font-size: 13px;
}
.stat .v{
	font-weight: 900;
	letter-spacing: .2px;
	margin-top: 6px;
}

.card-grid{
	display:grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	align-items: stretch;
}
.card-grid.mini{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card{
	border-radius: var(--radius2);
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.03);
	padding: var(--pad);
	box-shadow: 0 12px 30px rgba(0,0,0,.22);
	display:flex;
	flex-direction: column;
	min-height: 100%;
}
.card-top{
	display:flex;
	flex-direction: column;
	gap: 10px;
}
.card h3{
	margin: 0;
	font-size: 18px;
	letter-spacing: -0.01em;
}
.card p{
	margin: 0;
	color: rgba(245,246,247,.76);
}
.pill{
	display:inline-flex;
	align-items:center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 999px;
	width: fit-content;
	background: rgba(255,196,0,.12);
	border: 1px solid rgba(255,196,0,.22);
	color: rgba(255,224,120,.95);
	font-size: 12px;
	letter-spacing: .10em;
	text-transform: uppercase;
}
.list{
	margin: 14px 0 0;
	padding-left: 18px;
	color: rgba(245,246,247,.78);
}
.list li{ margin: 6px 0; }

.work{
	padding: 0;
	overflow:hidden;
}
.work-thumb{
	width:100%;
	height: 190px;
	object-fit: cover;
	border-bottom: 1px solid rgba(255,255,255,.10);
}
.work-body{
	padding: var(--pad);
	display:flex;
	flex-direction: column;
	gap: 10px;
}
.chips{
	display:flex;
	flex-wrap: wrap;
	gap: 8px;
}
.chip{
	font-size: 12px;
	padding: 7px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.10);
	color: rgba(245,246,247,.78);
}

.cta-row{
	margin-top: 6px;
	display:flex;
	flex-wrap: wrap;
	gap: 10px;
}

.card.highlight{
	border-color: rgba(255,196,0,.28);
	background: linear-gradient(180deg, rgba(255,196,0,.08), rgba(255,255,255,.03));
}
.note{
	margin-top: 12px !important;
	color: rgba(245,246,247,.62) !important;
	font-size: 12px;
}
.muted{
	color: rgba(245,246,247,.75);
}

.footer{
	padding: 34px 0 22px;
	border-top: 1px solid rgba(255,255,255,.10);
	background: rgba(0,0,0,.22);
}
.footer-row{
	display:flex;
	justify-content: space-between;
	gap: 18px;
	align-items: flex-start;
}
.footer-brand{
	display:flex;
	flex-direction: column;
	gap: 6px;
}
.brand-line{
	display:flex;
	align-items:center;
	gap: 10px;
}
.footer-muted{
	margin: 0;
	color: rgba(245,246,247,.66);
}
.footer-biz{
	color: rgba(245,246,247,.76);
	font-size: 14px;
	display:grid;
	gap: 6px;
	max-width: 720px;
}
.footer-biz .label{
	display:inline-block;
	min-width: 98px;
	color: rgba(245,246,247,.58);
}
.footer-bottom{
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255,255,255,.10);
}
.copyright{
	margin: 0;
	text-align:center;
	color: rgba(245,246,247,.62);
	font-size: 13px;
}

.to-top{
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 52px;
	height: 52px;
	border-radius: 18px;
	border: 1px solid rgba(255,196,0,.30);
	background: rgba(255,196,0,.92);
	color: #111;
	font-weight: 900;
	box-shadow: 0 18px 44px rgba(0,0,0,.35);
	cursor:pointer;
	z-index: 60;
}
.to-top:hover{
	transform: translateY(-1px);
}
.to-top:active{
	transform: translateY(0px);
}

/* Responsive */
@media (max-width: 980px){
	.nav{ display:none; }
	.nav-toggle{ display:inline-block; }
	.two-col{
		grid-template-columns: 1fr;
	}
	.media-img{
		min-height: 300px;
	}
	.card-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.card-grid.mini{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hero-content{
		padding: 54px 0 74px;
	}
}
@media (max-width: 560px){
	.container{
		width: calc(100% - 28px);
	}
	.card-grid{
		grid-template-columns: 1fr;
	}
	.card-grid.mini{
		grid-template-columns: 1fr;
	}
	.hero-controls-inner{
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.icon-btn{
		width: 42px;
		height: 42px;
		border-radius: 14px;
	}
	.footer-row{
		flex-direction: column;
	}
	.footer-biz .label{
		min-width: 86px;
	}
}
@media (prefers-reduced-motion: reduce){
	*{
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}