@font-face {
	font-family: "Spoqa Han Sans Neo";
	src: url("../../SpoqaHanSansNeo-Regular.woff2") format("woff2"), url("../../SpoqaHanSansNeo-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #0d0d10;
	--ink: #ffffff;
	--muted: #9096a7;
	--accent: #b864f7;
	--primary: #9d24f7;
	--secondary: #777c8b;
	--safe: #56e694;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100svh;
	background: var(--bg);
	color: var(--ink);
	font-family: "Spoqa Han Sans Neo", Pretendard, "Noto Sans KR", system-ui, sans-serif;
	overflow-x: hidden;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(circle at 50% 42%, rgba(169, 78, 232, .18), transparent 34%),
		radial-gradient(circle at 18% 18%, rgba(101, 48, 144, .1), transparent 24%),
		linear-gradient(rgba(210, 166, 255, .02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(210, 166, 255, .02) 1px, transparent 1px);
	background-size: auto, auto, 56px 56px, 56px 56px;
	mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

button {
	font: inherit;
}

.page {
	position: relative;
	isolation: isolate;
	min-height: 100svh;
	overflow: hidden;
	background: var(--bg);
}

.page::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -5;
	background: linear-gradient(180deg, rgba(12, 9, 17, .04), rgba(12, 9, 17, .5) 55%, #0c0911 84%);
}

.bg-scene,
.side-scene,
.float-card,
.orb {
	position: absolute;
	pointer-events: none;
	user-select: none;
}

.bg-scene {
	top: -2%;
	z-index: -4;
	width: 104%;
	object-fit: contain;
	object-position: center;
	opacity: .41;
	filter: saturate(.72) brightness(.92);
	animation: scene-breathe 14s ease-in-out infinite;
	mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%);
}

.side-scene {
	z-index: -3;
	top: 8%;
	height: 84%;
	width: min(36vw, 470px);
	object-fit: cover;
	opacity: .28;
	filter: blur(2px) saturate(.72) brightness(.9);
	animation: side-drift 24s ease-in-out infinite alternate;
}

.side-scene.left {
	left: -3%;
	mask-image: linear-gradient(90deg, #000 42%, transparent 100%);
}

.side-scene.right {
	right: -3%;
	mask-image: linear-gradient(270deg, #000 42%, transparent 100%);
	animation-duration: 28s;
	animation-delay: -11s;
}

.float-card {
	z-index: -2;
	aspect-ratio: 3 / 4;
	display: block;
	border-radius: 18px;
	background: center / cover no-repeat;
	border: 1px solid rgba(236, 205, 255, .16);
	width: 280px;
	overflow: hidden;
	opacity: .3;
	filter: blur(1.1px) saturate(.7) brightness(.88);
	box-shadow: 0 22px 70px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .14);
	transform-origin: center;
	will-change: transform, opacity;
}

.float-card::before {
	content: "";
	position: absolute;
	inset: -20% -55%;
	background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, .2) 48%, rgba(255, 255, 255, .05) 55%, transparent 68%);
	mix-blend-mode: screen;
	transform: translateX(-72%) rotate(4deg);
	animation: card-sheen 8.5s cubic-bezier(.45, 0, .2, 1) infinite;
}

.float-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .18), transparent 32%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(12, 9, 17, .18));
}

.float-card.one {
	left: 4%;
	top: 12%;
	width: 280px;
	animation: card-orbit-left 17s ease-in-out infinite;
	animation-delay: -4s;
}

.float-card.two {
	right: 5%;
	top: auto;
	bottom: 10%;
	width: 280px;
	opacity: .33;
	animation: card-orbit-right 19s ease-in-out infinite;
	animation-delay: -9s;
}

.float-card.three {
	left: 34%;
	top: 4%;
	width: 180px;
	opacity: .18;
	filter: blur(1.8px) saturate(.64) brightness(.82);
	animation: card-orbit-small 21s ease-in-out infinite;
	animation-delay: -12s;
}

@media (min-width: 721px) {
	.float-card.one,
	.float-card.three {
		background-image: url("../../oneconnect/optimized/casino-card.jpg");
	}

	.float-card.two {
		background-image: url("../../oneconnect/optimized/sportsbook-card.jpg");
	}
}

.orb {
	border: 1px solid rgba(188, 98, 241, .16);
	border-radius: 50%;
	z-index: -2;
	opacity: .32;
	animation: orb-breathe 34s ease-in-out infinite alternate;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
}

.orb.one {
	width: min(920px, 92vw);
	aspect-ratio: 1;
}

.orb.two {
	width: min(660px, 72vw);
	aspect-ratio: 1;
	animation-duration: 40s;
}

.orb::after,
.orb::before {
	content: "";
	position: absolute;
	width: 11px;
	height: 11px;
	border-radius: 3px;
	background: var(--accent);
	box-shadow: 0 0 28px var(--accent);
	top: 10%;
	left: 19%;
	transform: rotate(25deg);
}

.orb::after {
	top: auto;
	left: auto;
	right: 10%;
	bottom: 27%;
	background: var(--accent);
}

.hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 105px max(-60px, calc((100% - 780px) / 2 - 60px)) 120px;
	pointer-events: none;
	background: radial-gradient(ellipse at center, rgba(12, 9, 17, .87), rgba(12, 9, 17, .55) 58%, transparent 79%);
}

.topbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 23px clamp(42px, 4vw, 76px) 0;
}

.brand {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.brand-logo {
	display: block;
	width: var(--logo-width, 188px);
	height: var(--logo-height, 72px);
	object-fit: contain;
	object-position: left top;
}

.official {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 42px;
	color: var(--muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}

.official i {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 16px var(--accent);
}

.hero {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(780px, calc(100% - 48px));
	min-height: 100svh;
	margin: 0 auto;
	padding: 167px 0 51px;
	text-align: center;
}

.eyebrow {
	display: block;
	width: 230px;
	height: 30px;
}

.eyebrow img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hero-title {
	margin: 39px 0 0;
	font-size: 80px;
	line-height: 1.1;
	letter-spacing: -4px;
	font-weight: 800;
	color: #ffffff;
}

.hero-title span {
	color: var(--accent);
}

.lead {
	margin: 43px 0 0;
	color: var(--muted);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.72;
	letter-spacing: -.2px;
}

.addresses {
	width: 100%;
	margin-top: 85px;
	text-align: left;
}

.hint {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px 24px;
	color: var(--muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
}

.hint svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.domain-stack,
.domain-list {
	display: grid;
	gap: 20px;
}

.domain-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.domain-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 159px;
	padding: 30px 58px 28px 36px;
	border-radius: 14px;
	background: var(--primary);
	color: #ffffff;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
	transition: transform .2s ease, filter .2s ease;
}

.domain-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 26%, rgba(255, 255, 255, .34) 46%, rgba(255, 255, 255, .18) 52%, transparent 70%);
	transform: translateX(-130%) skewX(-12deg);
	animation: domain-shine 3.8s ease-in-out infinite;
	pointer-events: none;
}

.domain-card > * {
	position: relative;
	z-index: 1;
}

.domain-card.secondary {
	background: var(--secondary);
}

.domain-card:hover {
	transform: translateY(-3px);
	filter: brightness(1.05);
}

.domain-copy {
	display: grid;
	gap: 25px;
	min-width: 0;
}

.domain-head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 20px;
}

.domain-head small {
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: #ffffff;
}

.live {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 18px;
	padding: 0 8px;
	border: 1px solid rgba(255, 255, 255, .94);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	color: #ffffff;
}

.live::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--safe);
}

.domain-card b {
	display: block;
	color: #ffffff;
	font-size: 50px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -2px;
	overflow-wrap: anywhere;
}

.enter {
	flex: none;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	color: #ffffff;
}

.enter svg {
	width: 58px;
	height: 58px;
}

.domain-meta {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 19px 0 0 29px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
}

.domain-meta b {
	font-weight: 800;
}

.actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 21px;
	width: 100%;
	margin-top: 22px;
}

.action-button,
.action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	width: 100%;
	height: 90px;
	padding: 0 24px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 14px;
	background: rgba(255, 255, 255, .1);
	box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 18px 45px rgba(0, 0, 0, .18);
	color: #ffffff;
	font-family: inherit;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s ease, filter .2s ease, border-color .2s ease, background .2s ease;
}

.action-button:hover,
.action:hover {
	transform: translateY(-3px);
	filter: brightness(1.08);
	border-color: var(--accent);
	background: rgba(255, 255, 255, .14);
}

.action-button svg,
.action svg {
	width: 25px;
	height: 25px;
	color: var(--accent);
	stroke: currentColor;
}

.service-message {
	margin-top: 95px;
	text-align: center;
	color: #ffffff;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.95;
}

.service-message p {
	margin: 0;
}

.service-message p + p {
	margin-top: 14px;
}

.trust {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 58px;
	margin-top: auto;
	padding-top: 164px;
	color: var(--muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
}

.trust span {
	display: flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
}

.trust img {
	display: block;
	width: 15px;
	height: 15px;
	object-fit: contain;
}

.page-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	margin-top: 94px;
	color: var(--muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
}

.page-footer img {
	display: block;
	width: 14px;
	height: 14px;
	object-fit: contain;
}

.is-hidden {
	display: none !important;
}

@keyframes domain-shine {
	0%,
	58% {
		transform: translateX(-130%) skewX(-12deg);
	}

	78%,
	100% {
		transform: translateX(120%);
	}
}

@keyframes scene-breathe {
	0%,
	100% {
		transform: translate3d(-1.4%, .4%, 0) scale(1.04);
	}

	38% {
		transform: translate3d(1.1%, -1%, 0) scale(1.062);
	}

	68% {
		transform: translate3d(.4%, .7%, 0) scale(1.052);
	}
}

@keyframes scene-breathe-mobile {
	0%,
	100% {
		transform: translate3d(-5.4%, 1.7%, 0) scale(1.1);
	}

	42% {
		transform: translate3d(5.8%, -3.4%, 0) scale(1.17);
	}

	72% {
		transform: translate3d(1.2%, 2.4%, 0) scale(1.13);
	}
}

@keyframes side-drift {
	0%,
	100% {
		transform: translate3d(-14px, 7px, 0) rotate(-1.5deg) scale(1.03);
	}

	50% {
		transform: translate3d(14px, -10px, 0) rotate(1.2deg) scale(1.06);
	}
}

@keyframes card-orbit-left {
	0%,
	100% {
		transform: translate3d(-12px, 10px, 0) rotate(-13deg) scale(.985);
		opacity: .25;
	}

	36% {
		transform: translate3d(22px, -20px, 0) rotate(-8deg) scale(1.025);
		opacity: .34;
	}

	70% {
		transform: translate3d(8px, 15px, 0) rotate(-10deg) scale(1.005);
		opacity: .3;
	}
}

@keyframes card-orbit-right {
	0%,
	100% {
		transform: translate3d(14px, -8px, 0) rotate(10deg) scale(.99);
		opacity: .27;
	}

	44% {
		transform: translate3d(-24px, 20px, 0) rotate(5deg) scale(1.035);
		opacity: .37;
	}

	76% {
		transform: translate3d(-8px, -16px, 0) rotate(8deg) scale(1.01);
		opacity: .31;
	}
}

@keyframes card-orbit-small {
	0%,
	100% {
		transform: translate3d(-8px, -4px, 0) rotate(7deg) scale(.98);
	}

	48% {
		transform: translate3d(20px, 17px, 0) rotate(13deg) scale(1.04);
	}
}

@keyframes card-sheen {
	0%,
	46% {
		transform: translateX(-72%) rotate(4deg);
	}

	70%,
	100% {
		transform: translateX(72%) rotate(4deg);
	}
}

@keyframes mobile-card-left {
	0%,
	100% {
		transform: translate3d(-8px, 12px, 0) rotate(-12deg) scale(.96);
	}

	50% {
		transform: translate3d(20px, -18px, 0) rotate(-6deg) scale(1.04);
	}
}

@keyframes mobile-card-right {
	0%,
	100% {
		transform: translate3d(9px, -10px, 0) rotate(11deg) scale(.97);
	}

	50% {
		transform: translate3d(-22px, 18px, 0) rotate(5deg) scale(1.04);
	}
}

@keyframes orb-breathe {
	to {
		transform: rotate(7deg) scale(1.02);
	}
}

@media (max-width: 1100px) {
	.side-scene {
		width: 42vw;
		opacity: .28;
	}
}

@media (max-width: 720px) {
	.bg-scene {
		top: 18%;
		left: -48%;
		width: 174%;
		height: 84%;
		opacity: .38;
		object-fit: contain;
		object-position: center top;
		filter: saturate(.9) brightness(.98);
		animation: scene-breathe-mobile 13.5s ease-in-out infinite;
		mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 78%, transparent 100%);
	}

	.side-scene {
		display: block;
		width: 74vw;
		opacity: .18;
		filter: blur(3px) saturate(.62) brightness(.86);
	}

	.side-scene.left {
		left: -36%;
	}

	.side-scene.right {
		right: -36%;
	}

	.float-card {
		display: block;
		width: 86px;
		border-radius: 12px;
		opacity: .24;
		filter: blur(1.2px) saturate(.72) brightness(.86);
		box-shadow: 0 16px 38px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .12);
	}

	.float-card.one {
		left: -30px;
		top: 26%;
		width: 92px;
		background-image: url("../../oneconnect/optimized/casino-card-mobile.jpg");
		animation: mobile-card-left 10s ease-in-out infinite;
	}

	.float-card.two {
		right: -34px;
		top: auto;
		bottom: 18%;
		width: 94px;
		background-image: url("../../oneconnect/optimized/sportsbook-card-mobile.jpg");
		animation: mobile-card-right 11.5s ease-in-out infinite;
	}

	.float-card.three {
		display: none;
	}

	.float-card::before {
		animation-duration: 7.5s;
	}

	.hero::before {
		inset: 92px -18px 120px;
	}

	.orb.one {
		width: 140vw;
	}

	.orb.two {
		width: 100vw;
	}

	.topbar {
		padding: 16px 25px 0;
	}

	.brand-logo {
		width: var(--logo-mobile-width, 103px);
		height: var(--logo-mobile-height, 43px);
	}

	.official {
		gap: 7px;
		margin-top: 16px;
		font-size: 11px;
	}

	.official i {
		width: 10px;
		height: 10px;
	}

	.hero {
		width: calc(100% - 52px);
		min-height: 100svh;
		padding: 124px 0 28px;
	}

	.eyebrow {
		width: 136px;
		height: 18px;
	}

	.hero-title {
		margin-top: 21px;
		font-size: 38px;
		line-height: 1.06;
		letter-spacing: -2px;
	}

	.lead {
		margin-top: 25px;
		font-size: 14px;
		line-height: 1.65;
	}

	.addresses {
		margin-top: 61px;
	}

	.hint {
		gap: 8px;
		margin: 0 0 8px 13px;
		font-size: 11px;
	}

	.hint svg {
		width: 14px;
		height: 14px;
	}

	.domain-stack,
	.domain-list {
		gap: 16px;
	}

	.domain-card {
		min-height: 119px;
		padding: 25px 26px 21px 27px;
		border-radius: 9px;
	}

	.domain-copy {
		gap: 28px;
	}

	.domain-head {
		gap: 8px;
		min-height: 14px;
	}

	.domain-head small {
		font-size: 11px;
	}

	.live {
		height: 14px;
		padding: 0 6px;
		font-size: 8px;
	}

	.live::before {
		width: 5px;
		height: 5px;
	}

	.domain-card b {
		font-size: 30px;
		letter-spacing: -1.2px;
	}

	.enter,
	.enter svg {
		width: 32px;
		height: 32px;
	}

	.domain-meta {
		margin: 17px 0 0 23px;
		font-size: 11px;
	}

	.actions {
		gap: 15px;
		margin-top: 33px;
	}

	.action-button,
	.action {
		height: 60px;
		border-radius: 10px;
		gap: 9px;
		padding: 0 12px;
		font-size: 14px;
	}

	.action-button svg,
	.action svg {
		width: 18px;
		height: 18px;
	}

	.service-message {
		margin-top: 54px;
		font-size: 14px;
		line-height: 2.85;
	}

	.service-message p + p {
		margin-top: 12px;
	}

	.trust {
		gap: 22px;
		padding-top: 118px;
		font-size: 10px;
	}

	.trust span {
		gap: 5px;
	}

	.trust img {
		width: 13px;
		height: 13px;
	}

	.page-footer {
		gap: 5px;
		margin-top: 32px;
		font-size: 10px;
	}

	.page-footer img {
		width: 12px;
		height: 12px;
	}
}

@media (max-width: 380px) {
	.hero {
		width: calc(100% - 36px);
	}

	.hero-title {
		font-size: 34px;
	}

	.domain-card b {
		font-size: 28px;
	}

	.actions {
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		scroll-behavior: auto !important;
		transition: none !important;
	}
}