:root {
	--navy: #071526;
	--navy-2: #0b1f36;
	--ink: #101827;
	--text: #314055;
	--muted: #6f7d91;
	--line: #e6ebf2;
	--soft: #f5f8fc;
	--blue: #2f80ed;
	--blue-2: #4ca3ff;
	--violet: #6957ff;
	--white: #ffffff;
	--shadow: 0 24px 70px rgba(7, 21, 38, .14);
	--radius: 28px;
	--font: Aptos, "Segoe UI", "Malgun Gothic", "맑은 고딕", Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font);
	color: var(--ink);
	background: var(--white);
	line-height: 1.65;
}

a {
	color: inherit;
	text-decoration: none;
}

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

header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid rgba(230, 235, 242, .8);
}

.nav {
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 14px;
	font-weight: 700;
	letter-spacing: -.03em;
}

.brand svg {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
}

.brand-name {
	font-size: 24px;
	color: var(--navy);
}

.brand-name span {
	color: var(--blue);
	font-weight: 500;
}

.menu {
	display: flex;
	align-items: center;
	gap: 30px;
	color: #435066;
	font-size: 15px;
	font-weight: 600;
}

.menu a:hover {
	color: var(--blue);
}

.menu a.active:not(.cta) {
	color: var(--blue);
}

.menu .cta {
	padding: 11px 18px;
	border-radius: 999px;
	color: #fff;
	background: linear-gradient(135deg, var(--blue), var(--violet));
	box-shadow: 0 12px 28px rgba(47, 128, 237, .24);
}

.hamburger {
	display: none;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: rgba(255, 255, 255, .92);
	color: var(--navy);
	box-shadow: 0 8px 24px rgba(7, 21, 38, .08);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
}

.hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(circle at 78% 12%, rgba(76, 163, 255, .28), transparent 34%),
		radial-gradient(circle at 18% 25%, rgba(105, 87, 255, .14), transparent 32%),
		linear-gradient(180deg, #fff 0%, #f7faff 100%);
	padding: 108px 0 92px;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--blue);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--blue);
}

.hero h1 {
	margin: 0;
/* 	font-size: clamp(42px, 6vw, 78px); */
	font-size: 4em;
	line-height: 1.05;
/* 	letter-spacing: -.06em; */
/* 	color: var(--navy); */
}

.hero h2 {
	margin: 0;
	font-size: 2em;
}

.hero h2 em {
/* 	font-style: normal; */
	background: linear-gradient(135deg, var(--blue), var(--violet));
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.hero p {
	margin: 24px 0 0;
	color: var(--text);
	font-size: 19px;
	max-width: 620px;
}

.hero-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 34px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 22px;
	border-radius: 999px;
	font-weight: 700;
	border: 1px solid var(--line);
}

.btn.primary {
	color: #fff;
	border: 0;
	background: linear-gradient(135deg, var(--blue), var(--violet));
}

.btn.secondary {
	background: #fff;
	color: var(--navy);
}

.hero-card {
	position: relative;
	min-height: 520px;
	border-radius: 42px;
	background: linear-gradient(145deg, var(--navy), #0d2744 58%, #132b57);
/* 	box-shadow: var(--shadow); */
	overflow: hidden;
	padding: 42px;
	color: #fff;
}

.hero-card::before {
	content: "";
	position: absolute;
	inset: -20% -35% auto auto;
	width: 440px;
	height: 440px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(76, 163, 255, .36), transparent
		65%);
}

.hero-card svg.big-symbol {
	position: absolute;
	right: -12px;
	top: 68px;
	width: 420px;
	height: 420px;
	opacity: .92;
}

.hero-card div.vertical-logo {
	position: absolute;
	right: -12px;
	top: 68px;
	width: 420px;
	height: 420px;
	opacity: .92;
	background-image: url(../img/softenworks-logo-vertical-whitesoften.png);
}
/* Hero carousel */
.hero {
	padding: 0;
}

.hero-slider {
	position: relative;
}

.hero-viewport {
	overflow: hidden;
}

.hero-track {
	display: flex;
	transition: transform .72s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.hero-slide {
	flex: 0 0 100%;
	padding: 108px 0 92px;
}

.hero-copy {
	min-width: 0;
}

.hero-title {
	font-family: sans-serif;
}

.hero-title span {
	font-size: .82em;
	color: #3274E8;
}

.hero-company {
	margin: 0;
	line-height: 1.05;
}

.hero-card img {
	position: relative;
	z-index: 1;
	display: block;
	width: min(100%, 420px);
	height: auto;
	margin: 0 auto;
}

.hero-panel {
	min-height: 520px;
	border-radius: 42px;
/* 	box-shadow: var(--shadow); */
	padding: 42px;
	overflow: hidden;
	background: linear-gradient(145deg, var(--navy), #0d2744 58%, #132b57);
	color: #fff;
}

.product-panel {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	align-content: center;
}

.mini-product {
	min-height: 132px;
	padding: 24px;
	border-radius: 26px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .14);
	backdrop-filter: blur(12px);
}

.mini-product strong {
	display: block;
	font-size: 23px;
	letter-spacing: -.04em;
	line-height: 1.1;
}

.mini-product strong span {
	color: var(--blue-2);
}

.mini-product p {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, .72);
	font-size: 15px;
}

.alm-panel {
	display: grid;
	align-content: center;
	gap: 14px;
}

.alm-line {
	display: grid;
	grid-template-columns: 56px 1fr;
	align-items: center;
	gap: 16px;
	padding: 20px;
	border-radius: 22px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .13);
}

.alm-line span {
	width: 56px;
	height: 56px;
	border-radius: 18px;
	display: grid;
	place-items: center;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, var(--blue), var(--violet));
}

.alm-line strong {
	font-size: 18px;
	letter-spacing: -.02em;
}

.hero-nav {
    position: absolute;
/*     top: 50%; */
    z-index: 30;
/*     transform: translateY(-50%); */
    top: auto;
    bottom: 18px;
    transform: none;
    width: 46px;
    height: 46px;
    padding: 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(230, 235, 242, .95);
    border-radius: 999px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 14px 32px rgba(7, 21, 38, .14);
    color: var(--navy);

    font-size: 34px;
    line-height: 1;
    cursor: pointer;

    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.hero-nav:hover {
/* 	transform: translateY(-50%) scale(1.05); */
	background: linear-gradient(135deg, var(--blue), var(--violet));
	color: #fff;
}

.hero-prev {
	left: 18px;
}

.hero-next {
	right: 18px;
}

.hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 34px;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.hero-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(49, 64, 85, .22);
	cursor: pointer;
	transition: width .2s ease, background .2s ease;
}

.hero-dot.active {
	width: 28px;
	background: linear-gradient(135deg, var(--blue), var(--violet));
}

.metric-wrap {
	position: absolute;
	left: 34px;
	right: 34px;
	bottom: 34px;
	display: grid;
	margin-top: 200px;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.metric {
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 20px;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(12px);
}

.metric strong {
	display: block;
	font-size: 25px;
	line-height: 1.1;
}

.metric span {
	color: rgba(255, 255, 255, .68);
	font-size: 13px;
}

section {
	padding: 92px 0;
}

.section-head {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	align-items: end;
	margin-bottom: 38px;
}

.section-head h2 {
	margin: 0;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.1;
	letter-spacing: -.05em;
	color: var(--navy);
}

.section-head p {
	margin: 0;
	color: var(--muted);
	max-width: 520px;
}

.about {
	background: #fff;
}

.about-grid {
	display: grid;
/* 	grid-template-columns: repeat(3, 1fr); */
	gap: 18px;
}

.card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px;
	background: #fff;
	box-shadow: 0 14px 42px rgba(7, 21, 38, .05);
}

.card .num {
	color: var(--blue);
	font-weight: 800;
	letter-spacing: .08em;
	font-size: 13px;
}

.card h3 {
	margin: 14px 0 10px;
	font-size: 23px;
	letter-spacing: -.03em;
	color: var(--navy);
}

.card p {
	margin: 0;
	color: var(--text);
}

.history-card {
    overflow: hidden;
}

.history-image {
    display: flex;
    margin-top: 1.5rem;
    justify-content: center;
}

.history-image img {
    display: block;
    width: 100%;
    max-width: 700px;
    height: auto;
}

.products {
	background: var(--soft);
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.product {
	min-height: 260px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: var(--radius);
	padding: 28px;
	background: #fff;
	border: 1px solid var(--line);
	transition: transform .2s ease, box-shadow .2s ease;
}

.product:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
}

.product-link {
	margin-top: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: fit-content;
	padding: 12px 18px;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(47, 128, 237, .12), rgba(105, 87, 255, .12));
	color: var(--blue);
	font-size: 14px;
	font-weight: 700;
	transition: all .2s ease;
}

.product-link::after {
	content: "→";
	font-size: 15px;
	transition: transform .2s ease;
}

.product-link:hover {
	background: linear-gradient(135deg, var(--blue), var(--violet));
	color: #fff;
}

.product-link:hover::after {
	transform: translateX(3px);
}

.product .icon {
	width: 54px;
	height: 54px;
	border-radius: 18px;
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 800;
	background: linear-gradient(135deg, var(--blue), var(--violet));
}

.product h3 {
	margin: 24px 0 8px;
	font-size: 24px;
	letter-spacing: -.04em;
}

.product h3 span {
	color: var(--blue);
}

.product p {
	margin: 0;
	color: var(--text);
	font-size: 15px;
}

.product > img {
	width: 100%;
	margin: 1em 0 0 0;
}

.business-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.business-item {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 20px;
	align-items: start;
	padding: 28px;
	border-radius: var(--radius);
	background: linear-gradient(180deg, #fff, #f8fbff);
	border: 1px solid var(--line);
}

.business-item .mark {
	width: 72px;
	height: 72px;
	border-radius: 24px;
	background: #eef5ff;
	color: var(--blue);
	display: grid;
	place-items: center;
	font-size: 26px;
	font-weight: 800;
}

.business-item h3 {
	margin: 0 0 8px;
	color: var(--navy);
	font-size: 22px;
	letter-spacing: -.03em;
}

.business-item p {
	margin: 0;
	color: var(--text);
}

.history {
	background: var(--navy);
	color: #fff;
}

.history .section-head h2 {
	color: #fff;
}

.history .section-head p {
	color: rgba(255, 255, 255, .68);
}

.timeline {
	display: grid;
	gap: 14px;
}

.history-row {
	display: grid;
	grid-template-columns: 100px 120px 150px 1fr;
	gap: 24px;
	padding: 24px;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .06);
}

.history-row strong {
	color: var(--blue-2);
	font-size: 20px;
}

.history-row p {
	margin: 0;
	color: rgba(255, 255, 255, .78);
}

.history-row p.highlight {
	font-weight: bold;
	color: rgba(255, 255, 255, 1);
}

.contact {
	background: linear-gradient(180deg, #fff, #f7faff);
}

.contact-box {
	display: grid;
	grid-template-columns: 1fr .85fr;
	gap: 30px;
	padding: 44px;
	border-radius: 38px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}

.contact-box h2 {
	margin: 0 0 16px;
	font-size: clamp(32px, 4vw, 50px);
	line-height: 1.1;
	letter-spacing: -.05em;
	color: var(--navy);
}

.contact-box p {
	margin: 0;
	color: var(--text);
}

.contact-list {
	display: grid;
	gap: 14px;
}

.contact-list div {
	padding: 18px 20px;
	border-radius: 18px;
	background: var(--soft);
	color: var(--text);
}

.contact-list strong {
	display: block;
	color: var(--navy);
	margin-bottom: 2px;
}

footer {
	padding: 34px 0;
	background: #fff;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 14px;
}

footer .container {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

@media ( max-width : 1100px) {
	.mini-product strong {
		font-size: inherit;
	}
}

@media ( max-width : 920px) {
	.nav {
		position: relative;
	}

	.brand img {
		width: min(210px, 62vw);
		height: auto;
	}

	.hamburger {
		display: inline-flex;
		position: relative;
		z-index: 22;
		flex: 0 0 auto;
	}

	.menu {
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		right: 0;
		z-index: 21;
		display: none;
		gap: 4px;
		padding: 10px;
		border: 1px solid var(--line);
		border-radius: 16px;
		background: rgba(255, 255, 255, .98);
		box-shadow: 0 20px 48px rgba(7, 21, 38, .18);
		opacity: 0;
		transform: translateY(-8px);
		pointer-events: none;
		transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	}

	.menu.is-open {
		opacity: 1;
		display: grid;
		transform: translateY(0);
		pointer-events: auto;
	}

	.menu a {
		display: block;
		padding: 13px 14px;
		border-radius: 10px;
	}

	.menu a:hover,
	.menu a:focus-visible {
		background: rgba(47, 128, 237, .08);
	}

	.menu .cta {
		text-align: center;
	}
	.hero {
		padding: 76px 0 60px;
	}
	.hero-grid, .contact-box {
		grid-template-columns: 1fr;
	}
	.hero-card {
		min-height: 430px;
	}
	.hero-card svg.big-symbol {
		width: 360px;
		height: 360px;
	}
	.section-head {
		display: block;
	}
	.section-head p {
		margin-top: 14px;
	}
	/* .about-grid, */ .product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.business-grid {
		grid-template-columns: 1fr;
	}
	.history-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.hero-slide {
		padding: 76px 0 70px;
	}
	.hero-nav {
		top: auto;
		bottom: 18px;
		transform: none;
	}
	.hero-dots {
		bottom: 34px;
	}
	.product-panel {
		grid-template-columns: 1fr 1fr;
		min-height: auto;
	}
}

@media ( max-width : 560px) {
	.container {
		width: min(100% - 28px, 1160px);
	}
	.brand-name {
		font-size: 21px;
	}
	.brand svg {
		width: 42px;
		height: 42px;
	}
	.hero p {
		font-size: 17px;
	}
	/* .about-grid, */ .product-grid {
		grid-template-columns: 1fr;
	}
	.metric-wrap {
		grid-template-columns: 1fr;
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		margin-top: 240px;
	}
	.hero-card {
		padding: 28px;
	}
	.hero-card svg.big-symbol {
		right: -60px;
		top: 38px;
		width: 320px;
		height: 320px;
	}
	.business-item {
		grid-template-columns: 1fr;
	}
	.contact-box {
		padding: 28px;
		border-radius: 28px;
	}
	section {
		padding: 68px 0;
	}
	.history-image img {
	    max-width: 270px;
	}
	.hero-slide {
		padding: 64px 0 76px;
	}
	.hero h1.hero-title {
		font-size: clamp(40px, 14vw, 62px);
	}
	.hero h2 {
		font-size: 1.5em;
	}
	.hero-panel {
		min-height: auto;
		padding: 20px;
		border-radius: 30px;
	}
	.product-panel {
		grid-template-columns: 1fr;
	}
	.mini-product {
		min-height: auto;
		padding: 10px;
		border-radius: 15px;
	}
	.mini-product p {
		margin: 0;
		font-size: 14px;
	}
	.alm-line {
		gap: 16px;
		padding: 10px;
		border-radius: 15px;
	}
	.alm-line strong {
		font-size: 14px;
	}
}

/* Product submenu */
.menu-item {
	position: relative;
}

.menu-parent {
	display: flex;
	align-items: center;
	gap: 7px;
}

.menu-chevron {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .22s ease;
}

.submenu {
	position: absolute;
	top: calc(100% - 2px);
	left: 50%;
	z-index: 30;
	width: max-content;
	min-width: 190px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 20px 48px rgba(7, 21, 38, .16);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, -12px);
	transition: opacity .2s ease, transform .24s ease, visibility .2s ease;
}

.submenu::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

.submenu a {
	display: block;
	padding: 10px 14px;
	border-radius: 9px;
	color: var(--text);
	font-size: 14px;
	white-space: nowrap;
}

.submenu a:hover,
.submenu a:focus-visible,
.submenu a.current {
	color: var(--blue);
	background: rgba(47, 128, 237, .08);
}

.menu-item.has-submenu:hover .submenu,
.menu-item.has-submenu:focus-within .submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.menu-item.has-submenu:hover .menu-chevron,
.menu-item.has-submenu:focus-within .menu-chevron {
	transform: rotate(225deg) translate(-1px, -1px);
}

@media ( min-width : 921px) {
	.menu-item {
		align-self: stretch;
		display: flex;
		align-items: center;
	}
}

@media ( max-width : 920px) {
	.menu-item {
		display: block;
	}

	.menu-parent {
		justify-content: space-between;
	}

	.menu-chevron,
	.menu-item.has-submenu:hover .menu-chevron,
	.menu-item.has-submenu:focus-within .menu-chevron {
		transform: rotate(225deg) translate(-1px, -1px);
	}

	.submenu,
	.menu-item.has-submenu:hover .submenu,
	.menu-item.has-submenu:focus-within .submenu {
		position: static;
		width: auto;
		min-width: 0;
		margin: 2px 0 4px;
		padding: 4px 0 4px 16px;
		border: 0;
		border-left: 2px solid rgba(47, 128, 237, .18);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: none;
	}

	.submenu::before {
		display: none;
	}

	.submenu a {
		padding: 9px 14px;
		color: var(--muted);
		font-size: 13px;
	}
}