:root {
	--ink:#0c1021;
	--paper:#f5f3ef;
	--paper2:#e9e5dd;
	--violet:#7f70ff;
	--amber:#e0a457;
	--muted:#70727c;
	--line:rgba(12,16,33,.14);
	--max:1240px
}
* {
	box-sizing:border-box
}
html {
	scroll-behavior:smooth
}
body {
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif;
	line-height:1.55;
	word-break:keep-all
}
.site-shell {
	overflow:hidden
}
.container {
	width:min(calc(100% - 80px),var(--max));
	margin:auto
}
.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0,0,0,0)
}
.site-header {
	position:fixed;
	z-index:10;
	top:0;
	left:0;
	width:100%;
	height:88px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 max(40px,calc((100vw - var(--max))/2));
	color:#fff;
	transition:.3s
}
.site-header.is-scrolled {
	height:68px;
	background:rgba(12,16,33,.92);
	backdrop-filter:blur(16px);
	border-bottom:1px solid #ffffff22
}
.brand {
	display:inline-flex;
	align-items:center;
	gap:9px;
	color:inherit;
	text-decoration:none;
	font-weight:800;
	font-size:20px;
	letter-spacing:.055em
}
.brand-mark {
	display:grid;
	place-items:center;
	width:25px;
	height:25px;
	border:1px solid currentColor;
	border-radius:50%;
	font-size:14px;
	letter-spacing:0
}
.main-nav {
	display:flex;
	align-items:center;
	gap:29px
}
.main-nav a {
	color:inherit;
	text-decoration:none;
	font-size:14px;
	font-weight:600
}
.main-nav a:hover {
	color:var(--amber)
}
.main-nav .nav-contact {
	border:1px solid #ffffff88;
	border-radius:99px;
	padding:9px 16px;
	margin-left:6px
}
.main-nav i,.button i,.text-link i {
	font-style:normal;
	margin-left:7px
}
.menu-toggle {
	display:none
}
.hero {
	position:relative;
	min-height:760px;
	height:100vh;
	max-height:980px;
	color:#fff;
	display:flex;
	align-items:center
}
.hero-media,.hero-grid,.lounge-media,.lounge-shade {
	position:absolute;
	inset:0
}
.hero-media {
	background:linear-gradient(90deg,#060919f0 0%,#080a1fbf 38%,#080a1e40 72%,#080a1e88),url('../images/renewal/argenix-community.png') center/cover
}
.hero-grid {
	opacity:.35;
	background-image:linear-gradient(#ffffff1c 1px,transparent 1px),linear-gradient(90deg,#ffffff1c 1px,transparent 1px);
	background-size:90px 90px;
	mask-image:linear-gradient(90deg,#000,transparent 75%)
}
.hero-content {
	position:relative;
	padding-top:86px
}
.eyebrow {
	display:flex;
	align-items:center;
	gap:11px;
	margin:0 0 24px;
	color:#555967;
	font-size:11px;
	font-weight:800;
	letter-spacing:.16em
}
.eyebrow span {
	width:29px;
	height:1px;
	background:currentColor
}
.eyebrow.light {
	color:#ffffffbb
}
h1,h2,h3,p {
	margin-top:0
}
h1 {
	font-size:clamp(48px,6.2vw,90px);
	line-height:1.12;
	letter-spacing:-.065em;
	margin:0 0 25px;
	font-weight:700
}
em {
	font-style:normal;
	color:var(--violet)
}
.hero h1 em,.lounge h2 em {
	color:#e6b76e
}
.hero-copy {
	color:#ffffffbf;
	font-size:18px;
	margin-bottom:38px
}
.hero-actions {
	display:flex;
	align-items:center;
	gap:27px
}
.button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:15px 21px;
	text-decoration:none;
	font-weight:800;
	font-size:14px;
	transition:.2s
}
.button:hover {
	transform:translateY(-3px)
}
.button-primary {
	background:var(--amber);
	color:var(--ink)
}
.text-link {
	color:#fff;
	text-decoration:none;
	font-size:14px;
	font-weight:700
}
.hero-bottom {
	position:absolute;
	bottom:31px;
	left:0;
	width:100%;
	color:#ffffffa8;
	font-size:10px;
	letter-spacing:.15em
}
.hero-bottom .container {
	display:flex;
	justify-content:space-between;
	align-items:center
}
.scroll-cue {
	display:flex;
	align-items:center;
	gap:10px
}
.scroll-cue b {
	width:54px;
	height:1px;
	background:currentColor
}
.section {
	padding:142px 0
}
.split-heading {
	display:grid;
	grid-template-columns:1fr 2.1fr 1.2fr;
	gap:30px
}
.section-kicker {
	font-family:Georgia,serif;
	font-size:17px;
	color:var(--violet);
	font-style:italic;
	margin-bottom:17px
}
.split-heading h2,.section-title-row h2,.lounge h2,.outlook h2,.contact h2 {
	font-size:clamp(38px,4.5vw,65px);
	letter-spacing:-.065em;
	line-height:1.12;
	margin:0
}
.lede {
	font-size:17px;
	color:#50525d;
	align-self:end;
	margin:0 0 8px
}
.principle-grid {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	border-top:1px solid var(--line);
	margin-top:100px
}
.principle {
	padding:25px 28px 4px 0;
	min-height:235px;
	border-right:1px solid var(--line)
}
.principle:not(:first-child) {
	padding-left:28px
}
.principle:last-child {
	border:0
}
.principle>span,.card-number {
	color:#8a8c95;
	font-family:Georgia,serif;
	font-size:14px
}
.line-icon {
	font-size:29px;
	color:var(--violet);
	margin:33px 0 20px
}
.principle h3 {
	font-size:18px;
	letter-spacing:.08em;
	margin-bottom:8px
}
.principle p {
	font-size:14px;
	color:var(--muted)
}
.dark-section {
	position:relative;
	background:var(--ink);
	color:#fff
}
.business {
	padding-bottom:120px
}
.orbit {
	position:absolute;
	border:1px solid #7f70ff44;
	width:72vw;
	height:72vw;
	border-radius:50%
}
.orbit-a {
	right:-30vw;
	top:-48vw
}
.orbit-b {
	left:-48vw;
	bottom:-58vw
}
.section-title-row {
	display:flex;
	justify-content:space-between;
	align-items:end;
	gap:35px
}
.section-title-row>p {
	color:#888b97;
	font-size:15px;
	margin:0 0 8px
}
.dark-section .section-title-row>p {
	color:#ffffff99
}
.business-list {
	position:relative;
	margin-top:85px;
	border-top:1px solid #ffffff3d
}
.business-card {
	display:grid;
	grid-template-columns:9% 31% 1fr 28px;
	align-items:center;
	gap:25px;
	padding:36px 6px;
	border-bottom:1px solid #ffffff3d;
	transition:.25s
}
.business-card:hover {
	padding-left:18px;
	padding-right:18px;
	background:#ffffff0d
}
.business-card div p {
	font-size:10px;
	letter-spacing:.12em;
	color:#a4a7b3;
	margin-bottom:5px
}
.business-card h3 {
	font-size:26px;
	line-height:1.12;
	letter-spacing:-.045em;
	margin:0
}
.business-card ul {
	display:flex;
	gap:14px;
	justify-content:flex-end;
	list-style:none;
	padding:0;
	margin:0;
	color:#b7b9c2;
	font-size:13px
}
.business-card li {
	border:1px solid #ffffff30;
	border-radius:99px;
	padding:7px 11px
}
.card-arrow {
	font-size:22px;
	color:var(--amber)
}
.portfolio {
	background:var(--paper2)
}
.portfolio-grid {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:12px;
	margin-top:83px
}
.portfolio-item {
	position:relative;
	min-height:365px;
	padding:25px;
	color:#fff;
	display:flex;
	align-items:end;
	overflow:hidden;
	background:#222
}
.portfolio-item:before {
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(circle at 70% 25%,#a691ffcc,transparent 30%),linear-gradient(145deg,#1c2342,#0a0b15 65%);
	transition:.45s
}
.portfolio-item:nth-child(2):before {
	background:radial-gradient(circle at 30% 10%,#b66bff,transparent 27%),linear-gradient(140deg,#151a54,#120923 72%)
}
.portfolio-item:nth-child(3):before {
	background:radial-gradient(circle at 75% 30%,#e0a457,transparent 30%),linear-gradient(140deg,#37425b,#111b25 70%)
}
.portfolio-item:nth-child(4):before {
	background:radial-gradient(circle at 55% 10%,#6aa9ea,transparent 27%),linear-gradient(140deg,#283c52,#0c101d 70%)
}
.portfolio-item:hover:before {
	transform:scale(1.08)
}
.portfolio-item>* {
	position:relative
}
.portfolio-item>span {
	position:absolute;
	top:22px;
	right:23px;
	font-family:Georgia,serif;
	color:#ffffffa8
}
.portfolio-item p {
	font-size:10px;
	letter-spacing:.13em;
	margin-bottom:13px;
	color:#e9b974
}
.portfolio-item h3 {
	font-size:26px;
	letter-spacing:-.055em;
	line-height:1.16;
	margin-bottom:13px
}
.portfolio-item small {
	color:#ffffffb3;
	font-size:12px
}
.lounge {
	position:relative;
	min-height:690px;
	display:flex;
	align-items:center;
	color:#fff
}
.lounge-media {
	background:url('../images/renewal/lounge-community.png') center/cover
}
.lounge-shade {
	background:linear-gradient(90deg,#0b0f1eeb,#0b0f1eb8 41%,#0b0f1e10 75%)
}
.lounge-content {
	position:relative
}
.lounge .section-kicker {
	color:#e8b873
}
.lounge h2 {
	margin-bottom:28px
}
.lounge .lede {
	color:#ffffffc2;
	max-width:560px;
	line-height:1.7
}
.lounge-points {
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	margin-top:34px
}
.lounge-points span {
	font-size:11px;
	letter-spacing:.13em;
	border:1px solid #ffffff6b;
	border-radius:99px;
	padding:8px 12px
}
.roadmap {
	padding-bottom:125px
}
.timeline {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	list-style:none;
	padding:0;
	margin:88px 0 0;
	border-top:1px solid var(--line)
}
.timeline li {
	position:relative;
	padding:28px 24px 0 0;
	min-height:208px;
	border-right:1px solid var(--line)
}
.timeline li:not(:first-child) {
	padding-left:24px
}
.timeline li:last-child {
	border:0
}
.timeline li:before {
	content:"";
	position:absolute;
	width:9px;
	height:9px;
	border:2px solid var(--violet);
	background:var(--paper);
	border-radius:50%;
	top:-6px;
	left:-1px
}
.timeline li span {
	font-family:Georgia,serif;
	color:#858794
}
.timeline b {
	display:block;
	color:var(--violet);
	font-size:10px;
	letter-spacing:.16em;
	margin:34px 0 6px
}
.timeline h3 {
	font-size:18px;
	letter-spacing:-.04em;
	margin-bottom:8px
}
.timeline p {
	color:var(--muted);
	font-size:13px
}
.outlook-wrap {
	display:grid;
	grid-template-columns:1.08fr 1fr;
	gap:100px;
	align-items:center
}
.outlook .lede {
	color:#ffffffb3;
	margin-top:27px;
	line-height:1.7
}
.metric-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	border-top:1px solid #ffffff3d;
	border-left:1px solid #ffffff3d
}
.metric-grid div {
	padding:25px;
	border-right:1px solid #ffffff3d;
	border-bottom:1px solid #ffffff3d
}
.metric-grid small {
	display:block;
	color:#a7a9b3;
	font-size:11px;
	margin-bottom:13px
}
.metric-grid strong {
	font-family:Georgia,serif;
	font-size:38px;
	font-weight:400
}
.metric-grid strong span {
	font-size:17px;
	margin-left:3px
}
.metric-grid p {
	font-size:12px;
	color:#9194a0;
	margin:5px 0 0
}
.contact {
	padding:0;
	background:var(--paper2)
}
.contact-card {
	padding:124px 0 132px;
	background:radial-gradient(circle at 86% 20%,#7f70ff38,transparent 26%)
}
.contact h2 {
	margin-bottom:23px
}
.contact p:not(.eyebrow) {
	color:var(--muted);
	font-size:16px;
	line-height:1.7
}
.button-dark {
	margin-top:21px;
	background:var(--ink);
	color:#fff
}
footer {
	padding:28px 0;
	background:#090d19;
	color:#ffffffb8
}
footer .container {
	display:flex;
	align-items:center;
	gap:30px
}
footer .brand {
	font-size:16px;
	color:#fff
}
footer .brand-mark {
	width:21px;
	height:21px;
	font-size:11px
}
footer p {
	font-size:10px;
	letter-spacing:.1em;
	margin:0
}
footer p:last-child {
	margin-left:auto;
	color:#ffffff70;
	letter-spacing:0
}
.reveal {
	opacity:0;
	transform:translateY(26px);
	transition:.7s
}
.reveal.is-visible {
	opacity:1;
	transform:none
}
@media(max-width:860px) {
	.container {
		width:min(calc(100% - 40px),var(--max))
	}
	.site-header {
		height:70px;
		padding:0 20px
	}
	.site-header.is-scrolled {
		height:60px
	}
	.brand {
		font-size:17px
	}
	.menu-toggle {
		display:flex;
		flex-direction:column;
		gap:5px;
		padding:7px 0;
		background:transparent;
		border:0;
		color:#fff
	}
	.menu-toggle span {
		width:23px;
		height:1px;
		background:currentColor
	}
	.main-nav {
		position:absolute;
		top:70px;
		left:0;
		width:100%;
		display:none;
		flex-direction:column;
		align-items:stretch;
		gap:0;
		padding:12px 20px 20px;
		background:#101426;
		border-top:1px solid #ffffff22
	}
	.main-nav.is-open {
		display:flex
	}
	.main-nav a {
		padding:11px 0
	}
	.main-nav .nav-contact {
		margin:10px 0 0;
		text-align:center
	}
	.hero {
		min-height:680px
	}
	.hero-content {
		padding-top:78px
	}
	.hero-copy {
		font-size:15px
	}
	.desktop-only {
		display:none
	}
	.hero-bottom {
		bottom:22px
	}
	.hero-bottom .container span:first-child {
		display:none
	}
	.section {
		padding:90px 0
	}
	.split-heading {
		grid-template-columns:1fr;
		gap:14px
	}
	.principle-grid {
		grid-template-columns:1fr 1fr;
		margin-top:58px
	}
	.principle {
		min-height:200px;
		padding:22px 14px 10px 0
	}
	.principle:nth-child(2) {
		border-right:0
	}
	.principle:not(:first-child) {
		padding-left:14px
	}
	.section-title-row {
		display:block
	}
	.section-title-row>p {
		margin-top:20px;
		font-size:14px
	}
	.business-list {
		margin-top:54px
	}
	.business-card {
		grid-template-columns:38px 1fr 24px;
		gap:13px;
		padding:24px 0
	}
	.business-card ul {
		display:none
	}
	.business-card h3 {
		font-size:22px
	}
	.portfolio-grid {
		grid-template-columns:1fr 1fr;
		margin-top:50px
	}
	.portfolio-item {
		min-height:270px
	}
	.portfolio-item h3 {
		font-size:21px
	}
	.lounge {
		min-height:610px
	}
	.lounge-shade {
		background:linear-gradient(90deg,#0b0f1eeb,#0b0f1e99 68%,#0b0f1e2e)
	}
	.timeline {
		grid-template-columns:1fr 1fr;
		margin-top:55px
	}
	.timeline li {
		min-height:190px;
		padding:22px 14px 0 0
	}
	.timeline li:nth-child(2) {
		border-right:0
	}
	.timeline li:nth-child(n+3) {
		margin-top:35px
	}
	.timeline li:not(:first-child) {
		padding-left:14px
	}
	.timeline b {
		margin-top:24px
	}
	.outlook-wrap {
		grid-template-columns:1fr;
		gap:55px
	}
	.contact-card {
		padding:90px 0
	}
	.contact-card p br {
		display:none
	}
	footer .container {
		flex-wrap:wrap;
		gap:14px
	}
	footer p:last-child {
		width:100%;
		margin:0
	}
}
@media(max-width:420px) {
	h1 {
		font-size:45px
	}
	.hero-actions {
		gap:16px
	}
	.hero-actions .text-link {
		font-size:12px
	}
	.portfolio-item {
		min-height:235px;
		padding:18px
	}
	.portfolio-item h3 {
		font-size:18px
	}
	.metric-grid strong {
		font-size: 30px
	}
}