@charset "utf-8";
@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('assets/PretendardVariable.woff2') format('woff2-variations');
}
@font-face {
    font-family: 'ONE-Mobile-Title';
    src: url('assets/ONE-Mobile-Title.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
:root {
	--ink:#101426;
	--muted:#636879;
	--purple:#7848f4;
	--line:#e4e6ed;
	--navy:#0c1022;
	--max:1240px;
	--lime: #ffa500;
	--steal: #00bcd4;
	--steal-light: #00bcd4;	
	--text-dark: #0f172a;
	--text-muted: #64748b;
	--card-bg: #ffffff;
	--card-border: #e2e8f0;
	--accent-glow: rgba(37, 99, 235, 0.08);	
}
:root {
  --header-height: 60px;
}
* {
	box-sizing:border-box
}
html {
	scroll-behavior:smooth;
	scroll-padding-top:100px
}
body {
	margin:0;
	color:var(--ink);
	background:#fff;
	font-family:"Pretendard Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	font-size:16px;
	line-height:1.65;
	word-break:keep-all;
	/*-webkit-user-select: none; 
	-ms-user-select: none; 
	user-select: none;*/
}
a {
	color:inherit;
	text-decoration:none
}
button {
	font:inherit;
	cursor:pointer
}
button,a {
	-webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible {
	outline:3px solid #ac8bff;
	outline-offset:5px
}
h1,h2,h3,p {
	margin:0
}
h1,h2,h3 {
	line-height:1.27;
	letter-spacing:-.045em
}
h2 {
	font-size:clamp(30px,3.3vw,46px);
	font-weight:750
}
h3 {
	font-size:22px
}
.font-Mabiyet{
	font-family: 'ONE-Mobile-Title';
	font-weight:normal!important;
}
.noto-sans-sc {
  font-family: "Noto Sans SC", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.wrap {
	max-width:var(--max);
	margin:auto;
	width:calc(100% - 96px)
}
.section {
	padding-top:112px;
	padding-bottom:112px
}
.eyebrow {
	display:block;
	font-size:12px;
	letter-spacing:.14em;
	font-weight:700;
	color:var(--purple);
	margin-bottom:24px
}
.eyebrow-steal {
	display:block;
	font-size:12px;
	letter-spacing:.14em;
	font-weight:700;
	color:var(--steal);
	margin-bottom:24px
}
.eyebrow-point{
	display:block;
	font-size:14px;
	letter-spacing:.14em;
	font-weight:700;
	color:var(--lime);
	margin-bottom:24px;
	display: flex;
	flex-wrap: wrap;
	/* justify-content: center; */
	align-content: center;
}
.eyebrow.light {
	color:#b59bff
}
.skip {
	position:fixed;
	top:-80px;
	background:#fff;
	padding:10px;
	z-index:200
}
.skip:focus {
	top:10px
}

.circle-title{
	width:4rem;
	height:4rem;
	border-radius:100px;
	background-color:var(--lime);
	color:#ffffff;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	line-height:1.3;
	text-align:center;
	font-size:12px;
	font-weight:400;
	letter-spacing:-1px;
}
.circle-title .num{font-size:17px; display:block; font-weight:700;}
.core-title{
	display: flex;
    align-content: center;
    flex-wrap: wrap;
	padding-left:10px
}	
header {
	position:sticky;
	top:0;
	z-index:50;
	background:rgba(255,255,255,.97);
	border-bottom:1px solid #ececf2
}
.nav {
	height:86px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px
}
.brand {
	display:flex;
	align-items:center;
	gap:11px;
	font-size:24px;
	font-weight:800;
	letter-spacing:-.035em;
	line-height:1.2
}
.brand-sub {
	display:block;
	font-size:9px;
	letter-spacing:.17em;
	font-weight:600;
	margin-top:4px;
	color:#75798a
}
.brandmark {
	display:flex;
	align-items:center;
	gap:4px;
	padding:10px;
	border-radius:11px;
	background:var(--purple);
	height:39px
}
.brandmark svg{
	width:2rem;
}
.brandmark i {
	width:3px;
	height:12px;
	background:#fff;
	border-radius:3px
}
.brandmark i:nth-child(2) {
	height:23px
}
nav {
	display:flex;
	gap:32px;
	font-size:14px;
	font-weight:600
}
nav a:hover {
	color:var(--purple)
}
.nav-cta {
	padding:11px 19px;
	border:1px solid #d9d4e9;
	border-radius:6px;
	font-size:13px;
	font-weight:600
}
.menu-toggle {
	display:none
}
.hero {
	background:var(--navy);
	color:#fff;
	overflow:hidden;
	height: calc(100vh - var(--header-height));
	height: calc(100svh - var(--header-height));	
}
.hero-grid {
	display:grid;
	grid-template-columns:1.1fr 1fr;
	gap:48px;
	padding-top:70px;
	padding-bottom:65px;
	align-items:center
}
.hero h1 {
	font-size:clamp(38px,4.1vw,58px);
	line-height:1.24;
	font-weight:750;
	letter-spacing:-.055em
}
.hero h1 span {
	color:#b7a0ff
}
.hero-copy>p {
	color:#b7bbcc;
	font-size:16px;
	margin-top:28px;
	line-height:1.9
}

.hero-actions {
	display:flex;
	gap:12px;
	margin-top:35px
}
.button {
	display:inline-flex;
	justify-content:center;
	align-items:center;
	gap:15px;
	padding:14px 23px;
	border-radius:6px;
	font-weight:650;
	font-size:14px;
	transition:transform .2s,background .2s;
	border:1px solid transparent
}
.button:hover {
	transform:translateY(-2px)
}
.primary {
	color:#fff;
	background:var(--purple)
}
.secondary {
	background:transparent;
	border-color:#484a60;
	color:#fff
}
.play {
	font-size:10px;
	color:#baa5ff
}
.hero-tags {
	display:flex;
	gap:12px;
	margin-top:32px;
	color:#a9adbf;
	font-size:12px
}
.hero-tags span+span {
	border-left:1px solid #46495b;
	padding-left:12px
}
.hero-visual {
	height:535px;
	position:relative;
	margin-left:10px
}
.hero-visual>img {
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:8px;
	object-position:40% center
}
.visual-shade {
	position:absolute;
	inset:0;
	background:linear-gradient(0deg,rgba(10,12,30,.85),transparent 60%);
	border-radius:8px
}

.visual-caption {
	position:absolute;
	bottom:70px;
	left:30px
}
.caption-kicker {
	font-size:10px;
	letter-spacing:.15em;
	color:#d1c6f2
}
.visual-caption p {
	font-size:29px;
	line-height:1.4;
	font-weight:650;
	margin-top:12px
}
.floating-call {
	position:absolute;
	bottom:-24px;
	left:-30px;
	right:20px;
	padding:22px;
	background:#25283f;
	border:1px solid #4d4669;
	border-radius:8px;
	display:flex;
	align-items:center;
	gap:15px;
	box-shadow:0 10px 40px #0003
}
.floating-call small {
	display:block;
	color:#a8a7be;
	font-size:11px
}
.floating-call strong {
	font-size:13px;
	font-weight:550
}
.call-icon {
	font-size:29px;
	color:#b899ff
}

.hero-bottom {
	border-top:1px solid #2a2d40;
	display:flex;
	justify-content:space-between;
	padding:22px 0;
	font-size:10px;
	letter-spacing:.13em;
	color:#9b9fb4
}
.hero-bottom a span {
	margin-left:18px;
	font-size:18px
}
.section-head {
	gap:40px;
	align-items:flex-end;
	margin-bottom:54px
}
.section-head>p {
	color:var(--muted);
	font-size:17px;
	line-height:1.9;
	max-width:740px;
	margin-top:20px;
}
.value-grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	border-top:1px solid var(--line)
}
.value-grid article {
	padding-top:30px;
	padding-right:35px
}
.value-grid article+article {
	padding-left:35px;
	border-left:1px solid var(--line)
}
.value-symbol {
	color:var(--purple);
	font-size:13px;
	font-weight:600
}
.value-symbol svg{
	fill:var(--purple);
	width:2rem;
}
.value-grid h3 {
	margin:25px 0 15px
}
.value-grid p {
	color:var(--muted);
	font-size:15px;
	line-height:1.9
}
.overview, .solutions  {
	background:#f5f6fa
}
.feature-grid {
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:15px
}
.feature-grid>a {
	background:white;
	padding:24px 22px 26px;
	border:1px solid #e9eaf1;
	display:flex;
	flex-direction:column;
	min-height:330px;
	transition:transform .2s,border-color .2s;
	border-radius:7px
}
.feature-grid>a:hover {
	transform:translateY(-6px);
	border-color:#b295fb
}
.feature-index {
	font-size:9px;
	letter-spacing:.06em;
	color:#7e8190
}
.feature-icon {
	display:block;
	font-size:33px;
	font-weight:500;
	color:var(--purple);
	height:76px;
	padding-top:19px
}
.feature-icon  svg{
	width:2.5rem;
	fill:var(--purple);
}
.feature-grid h3 {
	font-size:19px;
	line-height:1.5;
	letter-spacing:-.04em
}
.feature-grid p {
	font-size:14px;
	color:var(--muted);
	margin-top:15px;
	line-height:1.85
}
.feature-link {
	font-size:12px;
	color:var(--purple);
	margin-top:auto;
	padding-top:25px;
	font-weight:600
}
.tabs {
	display:flex;
	border-bottom:1px solid var(--line);
	margin-bottom:36px;
	gap:0
}
.tabs button {
	flex:1;
	background:none;
	border:0;
	border-bottom:3px solid transparent;
	padding:17px 12px;
	color:#717584;
	font-size:15px;
	font-weight:600
}
.tabs button[aria-selected=true] {
	color:var(--steal);
	border-bottom-color:var(--steal)
}
@keyframes numPop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.32);
  }
  65% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

/* .num 스타일 설정 */
.circle-title {
  display: inline-block;
  transform-origin: center center;
  will-change: transform;
}

/* 탭 전환 시 부여할 클래스 */
.circle-title.pop {
  animation: numPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.solution-panel {
	display:grid;
	grid-template-columns:1fr 1.1fr;
	gap:70px;
	min-height:380px;
	align-items:start;
}
.solution-copy .eyebrow {
	margin-bottom:20px
}
.solution-copy h3 {
	font-size:32px;
	line-height:1.45
}
.solution-copy>p {
	color:var(--muted);
	margin-top:20px;
}
.check-list {
	list-style:none;
	padding:0;
	margin:24px 0 0
}
.check-list li {
	padding:6px 0
}
.check-list li:before {
	content:'';
	color:var(--purple);
	margin-right:12px;
	display: inline-block;
	width: 15px;
	height: 15px;	
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(0,188,212,1)'%3E%3Cpath d='M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z'%3E%3C/path%3E%3C/svg%3E");
}
.solution-art {
	background:#f0f4f5;
	padding:32px;
	border-radius:10px;
	min-height:340px
}
.art-title {
	font-size:11px;
	color:#7c738e;
	letter-spacing:.12em;
	margin-bottom:22px
}
.source-cards {
	display:flex;
	gap:12px
}
.source-cards div {
	background:white;
	flex:1;
	padding:18px;
	border:1px solid #e8e3f2;
	border-radius:5px
}
.source-cards strong {
	font-size:16px
}
.source-cards p {
	font-size:15px;
	color:var(--muted);
	margin-top:8px;
	line-height:1.9
}
.engine-row {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:15px;
	margin-top:23px;
	color:#85749f;
	font-size:12px
}
.engine {
	background:var(--steal);
	color:white;
	border-radius:5px;
	padding:12px 21px;
	font-weight:700;
	font-size:13px
}
.answer-row {
	padding:13px;
	background:#f6f9f9;
	padding:14px;
	color:var(--steal);
	margin-top:22px;
	border-radius:5px;
	font-size:13px;
	text-align:center
}
.outbound-blocks {
	display:grid;
	gap:12px
}
.outbound-blocks div {
	background:white;
	padding:16px 19px;
	display:flex;
	gap:20px;
	align-items:center;
	border-radius:5px
}
.outbound-blocks b {
	color:var(--steal);
	font-size:26px;
	min-width:70px
}
.outbound-blocks strong {
	font-size:16px
}
.outbound-blocks small {
	display:block;
	color:var(--muted);
	font-size:14px
}
.language-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:13px
}
.language-grid div {
	background:white;
	border:1px solid #e6e1ee;
	padding:18px;
	border-radius:5px
}
.language-grid small {
	color:var(--steal);
	font-size:13px
}
.language-grid strong {
	display:block;
	font-size:17px;
	line-height:1.6;
	margin-top:10px;
	word-break:normal
}
.language-grid span {
	font-size:13px;
	color:var(--muted)
}
.time-row {
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:22px
}
.time-row svg{width:4rem; fill:var(--steal)}
.time-row b {
	font-size:70px;
	color:var(--steal);
	line-height:1
}
.time-row span {
	font-size:12px;
	color:#746580
}
.night-list {
	display:grid;
	gap:9px
}
.night-list div {
	background:#fff;
	border-radius:4px;
	padding:12px 15px;
	font-size:15px
}
.night-list small {
	display:block;
	color:var(--steal);
	font-size:13px;
	margin-bottom:3px
}
.sms-preview {
	background:#fff;
	border-radius:8px;
	padding:20px 24px;
	border:1px solid #e5dfee;
	font-size:15px
}
.sms-preview strong {
	display:block;
	border-bottom:1px solid #eee;
	padding-bottom:12px;
	margin-bottom:15px
}
.sms-preview small {
	display:block;
	color:#777;
	font-size:13px;
	margin-bottom:9px
}
.sms-preview p {
	line-height:1.9
}
.sms-preview .file {
	margin-top:15px;
	background:#f1f7f9;
	padding:14px;
	color:var(--steal);
	border-radius:4px;
	font-size:12px
}
.experience {
	background:#11152b;
	color:#fff
}
.experience-layout {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:100px;
	align-items:center
}
.experience h2 {
	font-size:42px;
	line-height:1.35
}
.experience h2 span {
	color:#b89fff
}
.experience p {
	color:#aeb2c6;
	margin-top:23px;
}
.scenario-options {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:9px;
	margin-top:30px
}
.scenario-options button {
	border:1px solid #373b52;
	background:transparent;
	padding:10px 17px;
	border-radius:5px;
	color:#b9bdd0;
	font-size:13px;
	text-align:left;
}
.scenario-options button .dot{width:10px; height:10px; border-radius:50%; background-color:#1beaaa; display:inline-block; margin-right:5px;}
.scenario-options button .dot2{background-color:#ffc107; }
.scenario-options button .dot3{background-color:#ffa9a9; }
.scenario-options button svg{
	width:1rem;
	fill:#d6c6ff;
	vertical-align:middle;
	margin-right:10px;
}
.scenario-options button.active {
	border-color:#9471ed;
	background:#28213f;
	color:#d6c6ff
}
.example-note {
	display:block;
	color:#8990a9;
	font-size:11px;
	margin-top:20px
}
.conversation {
	background:white;
	color:var(--ink);
	border-radius:12px;
	overflow:hidden;
	box-shadow:0 20px 70px #0003
}
.conversation-top {
	display:flex;
	gap:12px;
	align-items:center;
	padding:22px 26px;
	border-bottom:1px solid #ececf1
}
.conversation-top strong {
	display:block;
	font-size:15px
}
.conversation-top small {
	font-size:11px;
	color:#8a8e9c;
	display:block
}
.mini-mark {
	background:var(--purple);
	color:white;
	padding:7px;
	border-radius:8px;
	font-size:15px;
	font-weight:700
}
#conversation-content {
	padding:25px;
	min-height:320px;
	background:#f8f9fc
}
.chat-label {
	font-size:10px;
	color:#848897;
	margin:9px 0 5px
}
.chat-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-label.right {
  justify-content: flex-end;
}

.chat-icon {
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
}
.chat-label.right {
	text-align:right
}
.bubble {
	border-radius:8px;
	padding:13px 17px;
	font-size:15px;
	line-height:1.85;
	max-width:88%
}
.bubble.user {
	background:#ede5ff;
	color:#553583;
	margin-left:auto
}
.bubble.ai {
	background:white;
	border:1px solid #e4e5ec
}
.source-tag {
	font-size:10px;
	color:#83709e;
	margin-top:10px
}
/* 순차 등장 애니메이션 */
.step-item {
  opacity: 0;
  transform: translateY(12px);
}

/* .animate 클래스가 붙었을 때만 순차적으로 등장 */
.animate .step-item {
  animation: fadeInUpChat 0.45s ease-out forwards;
}

@keyframes fadeInUpChat {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 등장 간격 */
.animate .step-1 { animation-delay: 0.1s; }
.animate .step-2 { animation-delay: 0.65s; }
.animate .step-3 { animation-delay: 1.25s; }

.chat-message {
	margin-top: 21px;
	border: 1px solid #e7d2c7;
	background: #f3ede9;
	border-radius: 6px;
	padding: 14px 17px;
	font-size: 15px;
	color: #694530;
}
.chat-message img{width:18px; vertical-align:middle; margin:-2px 5px 0 0;}
.wave {
  display: flex;
  align-items: center; /* 가운데 기준 물결 (바닥 기준을 원하면 flex-end) */
  gap: 3px;            /* 막대 사이 간격 */
  height: 20px;        /* 전체 컨테이너 높이 확보 */
}

.wave i {
  display: inline-block;
  width: 2px;
  height: 16px;        /* 기본 높이를 통일하고 scale로 리듬을 주는 게 훨씬 부드러워 */
  background: #aa86ff;
  border-radius: 3px;
  transform-origin: center; /* 바닥 기준 튀는 느낌은 'bottom'으로 변경 */
  animation: pulse 1.2s ease-in-out infinite;
}

/* 물결이 왼쪽에서 오른쪽으로 흐르도록 딜레이 순차 적용 */
.wave i:nth-child(1) { animation-delay: 0.0s; }
.wave i:nth-child(2) { animation-delay: 0.2s; }
.wave i:nth-child(3) { animation-delay: 0.4s; }
.wave i:nth-child(4) { animation-delay: 0.6s; }
.wave i:nth-child(5) { animation-delay: 0.8s; }

@keyframes pulse {
  0%, 100% {
    transform: scaleY(0.25);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
.chat-message .link{
	/*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(97,65,141,1)'%3E%3Cpath d='M21 15L15 20.996L4.00221 21C3.4487 21 3 20.5551 3 20.0066V3.9934C3 3.44476 3.44495 3 3.9934 3H20.0066C20.5552 3 21 3.45576 21 4.00247V15ZM19 5H5V19H13V14C13 13.4872 13.386 13.0645 13.8834 13.0067L14 13L19 12.999V5ZM18.171 14.999L15 15V18.169L18.171 14.999Z'%3E%3C/path%3E%3C/svg%3E");*/
	background-size:18px;
	background-position:left center;
	background-repeat:no-repeat;
	padding:.4rem 1rem;
	background-color:#f38b7e;
	color:#f7ede8;
	border-radius:100px;
	font-size:13px;
	display:inline-block;
	margin-top:5px;
	}
.chat-message strong {
	display:flex;
	font-size:11px;
	letter-spacing:.05em;
	color:#f38b7e;
	margin-bottom:4px
}
.chat-message strong .tt{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}
.conversation-bottom {
	padding:18px 23px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	font-size:10px;
	color:#878999
}
.conversation-bottom button {
	background:#f0e9ff;
	border:0;
	padding:7px 12px;
	border-radius:4px;
	color:#7545da;
	font-size:11px;
	white-space:nowrap
}
.journey>.eyebrow {
	margin-bottom:24px
}
.steps {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	border-top:1px solid var(--line);
	gap:0
}
.steps article {
	padding:29px 24px 0 0
}
.steps article+article {
	padding-left:28px;
	border-left:1px solid var(--line)
}
.steps article>span {
	font-size:30px;
	font-weight:350;
	color:#b6a0e6
}
.steps h3 {
	margin:20px 0 12px;
	font-size:20px
}
.steps p {
	font-size:14px;
	color:var(--muted);
	line-height:1.9
}
.company {
	background:#f5f6fa
}
.company-layout {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:100px
}
.company h2 {
	font-size:36px
}
.company p {
	color:var(--muted);
	font-size:15px;
	margin-top:23px
}
.company-logo {
	width:135px;
	height:105px;
	object-fit:contain;
	margin-top:35px
}
.company-details dl {
	margin:0
}
.company-details dl>div {
	display:grid;
	grid-template-columns:105px 1fr;
	gap:15px;
	padding:15px 0;
	border-bottom:1px solid #dddfe8;
	font-size:14px
}
.company-details dt {
	color:#8b8f9d;
	font-size:13px
}
.company-details dd {
	margin:0
}
.brands {
	display:flex;
	align-items:center;
	padding-top:15px
}
.brands span {
	display:grid;
	grid-template-columns:105px 1fr;
	gap:15px;
	color:#8b8f9d;
	font-size:14px
}
.brands img {
	width:230px;
	max-width:75%;
	height:auto
}
.closing {
	padding:85px 0;
	background:linear-gradient(115deg,#4f2ab0,#7345e3);
	color:#fff;
	text-align:center
}
.closing .eyebrow {
	color:#d4c8f5
}
.closing h2 {
	font-size:42px
}
.closing p {
	font-size:14px;
	color:#d7ccf3;
	margin:20px 0 30px
}
.white {
	background:#fff;
	color:#5c35ba
}
footer {
	padding:36px 0;
	background:#0e1224;
	color:#a6aabd
}
.footer-grid {
	display:flex;
	gap:45px;
	align-items:center;
	justify-content:space-between
}
.footer-grid .brand {
	color:white;
	font-size:21px
}
.footer-grid p {
	font-size:11px;
	line-height:1.9
}
.footer-grid>span {
	font-size:10px
}
dialog {
	width:min(520px,calc(100% - 40px));
	border:0;
	border-radius:12px;
	padding:32px;
	color:var(--ink);
	box-shadow:0 20px 80px #0005
}
dialog::backdrop {
	background:#070919b3;
	backdrop-filter:blur(5px)
}
.dialog-head {
	display:flex;
	justify-content:space-between;
	align-items:center
}
.dialog-head .eyebrow {
	margin:0
}
.dialog-head button {
	border:0;
	background:none;
	font-size:30px;
	line-height:1;
	color:#666
}
dialog h2 {
	font-size:26px;
	margin:25px 0 12px
}
dialog p {
	font-size:14px;
	color:var(--muted)
}
dialog audio {
	width:100%;
	margin-top:25px
}
@media(min-width:1600px) {
	.hero-grid {
		padding-top:90px;
		padding-bottom:90px
	}
	.hero-visual {
		height:560px
	}
}
@media(max-width:1100px) {
	.wrap {
		width:calc(100% - 56px)
	}
	nav {
		gap:20px
	}
	.nav-cta {
		display:none
	}
	.hero-grid {
		gap:30px
	}
	.hero-visual {
		height:480px
	}
	.hero h1 {
		font-size:44px
	}
	.hero-copy>p {
		font-size:14px;
	}
	.feature-grid {
		grid-template-columns:repeat(3,1fr)
	}
	.feature-grid>a {
		min-height:300px
	}
	.experience-layout,.company-layout {
		gap:45px
	}
	.solution-panel {
		gap:35px
	}
	.experience h2 {
		font-size:36px
	}
	.hero-actions .button {
		padding:13px 16px;
		font-size:13px
	}
	.floating-call {
		left:-15px;
		right:10px;
		padding:15px
	}
}
@media(max-width:760px) {
	html {
		scroll-padding-top:85px
	}
	.wrap {
		width:calc(100% - 40px)
	}
	.nav {
		height:72px
	}
	.brand {
		font-size:21px
	}
	.menu-toggle {
		display:block;
		background:none;
		border:0;
		font-size:22px;
		color:var(--ink)
	}
	nav {
		display:none;
		position:absolute;
		top:72px;
		left:0;
		right:0;
		background:white;
		padding:23px;
		box-shadow:0 14px 20px #0001
	}
	nav.open {
		display:flex;
		flex-direction:column;
		gap:18px
	}
	.section {
		padding-top:70px;
		padding-bottom:70px
	}
	.hero-grid {
		grid-template-columns:1fr;
		padding-top:45px;
		gap:40px;
		padding-bottom:55px
	}
	.hero h1 {
		font-size:43px
	}
	.hero-copy>p {
		font-size:14px
	}
	.hero-visual {
		height:380px;
		margin:0
	}
	.floating-call {
		left:14px;
		right:14px;
		bottom:-20px
	}
	.visual-caption {
		bottom:60px;
		left:25px
	}
	.hero-bottom {
		font-size:8px
	}
	.hero-bottom a {
		font-size:8px
	}
	.hero-tags {
		font-size:11px
	}
	.eyebrow {
		margin-bottom:18px;
		font-size:10px
	}
	.section-head {
		flex-direction:column;
		align-items:flex-start;
		gap:22px;
		margin-bottom:35px
	}
	.section-head>p {
		font-size:14px
	}
	.value-grid {
		grid-template-columns:1fr
	}
	.value-grid article {
		padding:25px 0
	}
	.value-grid article+article {
		border-left:0;
		border-top:1px solid var(--line);
		padding-left:0
	}
	.value-grid h3 {
		margin-top:12px
	}
	.feature-grid {
		grid-template-columns:1fr 1fr;
		gap:10px
	}
	.feature-grid>a {
		padding:20px 16px;
		min-height:280px
	}
	.feature-grid h3 {
		font-size:16px
	}
	.feature-index {
		font-size:8px
	}
	.feature-grid p {
		font-size:12px
	}
	.feature-icon {
		height:62px;
		font-size:27px
	}
	.tabs {
		overflow-x:auto
	}
	.tabs button {
		flex:0 0 auto;
		padding:14px 17px;
		font-size:13px
	}
	.solution-panel {
		grid-template-columns:1fr;
		gap:30px;
		min-height:0
	}
	.solution-copy h3 {
		font-size:27px
	}
	.solution-copy>p {
		font-size:14px
	}
	.solution-art {
		padding:22px;
		min-height:320px
	}
	.experience-layout,.company-layout {
		grid-template-columns:1fr;
		gap:40px
	}
	.experience h2 {
		font-size:34px
	}
	.scenario-options {
		flex-direction:row;
		flex-wrap:wrap
	}
	.scenario-options button {
		font-size:11px;
		padding:9px 10px
	}
	.conversation-bottom {
		font-size:9px;
		padding:15px
	}
	.steps {
		grid-template-columns:1fr 1fr
	}
	.steps article {
		padding:25px 15px!important;
		border-left:0!important;
		border-bottom:1px solid var(--line)
	}
	.steps article:nth-child(even) {
		border-left:1px solid var(--line)!important
	}
	.steps h3 {
		font-size:18px
	}
	.steps p {
		font-size:12px
	}
	.company h2 {
		font-size:29px
	}
	.company-logo {
		margin-top:20px
	}
	.company-details dl>div, .brands span {
		grid-template-columns:82px 1fr;
		font-size:13px
	}
	.closing h2 {
		font-size:33px
	}
	.closing {
		padding:65px 0
	}
	.closing .eyebrow {
		font-size:8px
	}
	.footer-grid {
		flex-direction:column;
		align-items:flex-start;
		gap:22px
	}
	.closing h2 {
		font-size: 30px;
	}
	.hero-bottom a span {
		margin-left:5px
	}
}
@media(max-width:400px) {
	.brands span {
		display:block;
		padding-bottom:10px;
	}	
	.brands {
		display: block;
	}
}
@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior:auto
	}
	.wave i {
		animation:none
	}
	* {
		transition: none!important
	}
}
/* Full-width background video hero */
.hero-video-background {
	position:relative;
	isolation:isolate;
	min-height:700px;
	display:flex;
	flex-direction:column;
	justify-content:center
}
.hero-media {
	position:absolute;
	inset:0;
	z-index:-1;
	overflow:hidden;
	background:#0c1022
}
.hero-poster,.hero-media video {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center 42%
}
.hero-media video {
	opacity:0;
	transition:opacity .5s
}
.hero-media video.is-ready {
	opacity:1
}
.hero-overlay {
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,rgba(8,12,29,.94) 0%,rgba(8,12,29,.82) 37%,rgba(8,12,29,.30) 76%,rgba(8,12,29,.25) 100%),linear-gradient(0deg,rgba(8,12,29,.6),transparent 35%)
}
.hero-video-background .hero-grid {
	position:relative;
	display:block;
	padding-top:100px;
	padding-bottom:100px;
	flex:1;
	align-content:center
}
.hero-video-background .hero-copy {
	max-width:700px
}
.hero-video-background h1 {
	font-size:clamp(42px,4.5vw,64px)
}
.hero-video-background .hero-copy>p {
	color:#e0e0ec;
	max-width:380px;
}
.hero-video-background .hero-tags {
	color:#d0cedd
}
.hero-video-background .hero-bottom {
	position:relative;
	border-color:#ffffff35;
	color:#d5d4e0;
	gap:20px
}
.video-toggle {
	margin-left:auto;
	background:#0c102260;
	border:1px solid #ffffff60;
	border-radius:4px;
	color:white;
	padding:5px 12px;
	font-size:12px;
	letter-spacing:0
}
.video-toggle[hidden] {
	display:none
}
/* 1. Hero 기본 설정 */
.hero {
  position: relative;
  overflow: hidden;
  height: calc(100svh - var(--header-height, 60px));
  display: flex;
  align-items: center;
  /* 초기 로딩 시 화면 중앙에 은은하게 위치하도록 기본값 설정 */
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-opacity: 0;
}

/* 2. 마우스 따라다니는 스포트라이트 조명 레이어 */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* 비디오(1)보다는 위, 텍스트(3)보다는 아래 */
  opacity: var(--glow-opacity, 0);
  transition: opacity 0.5s ease;
  
  /* 부드러운 다중 레이어 빛 (중앙 코발트블루 + 외곽 시안빛) */
  background: 
    radial-gradient(
      350px circle at var(--glow-x) var(--glow-y),
      rgba(59, 130, 246, 0.28) 0%,
      rgba(37, 99, 235, 0.12) 40%,
      transparent 80%
    );
  mix-blend-mode: screen;
}
.hero-content {
  position: relative;
  z-index: 3;
}
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(130px);
  /* 나갈 때와 들어올 때 모두 부드러운 전환 효과 */
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media(max-width:760px) {
	.hero-video-background {
		min-height:600px
	}
	.hero-video-background .hero-grid {
		padding-top:65px;
		padding-bottom:70px
	}
	.hero-video-background h1 {
		font-size:clamp(36px,7vw,44px)
	}
	.hero-poster,.hero-media video {
		object-position:60% center
	}
	.hero-overlay {
		background:linear-gradient(90deg,rgba(8,12,29,.92),rgba(8,12,29,.68)),linear-gradient(0deg,rgba(8,12,29,.6),transparent)
	}
	.hero-video-background .hero-bottom {
		flex-wrap:wrap
	}
	.video-toggle {
		font-size:11px
	}
}
@media(max-width:1100px) {
	.hero-video-background .hero-copy>p {
		max-width:340px;
	}
}
@media(prefers-reduced-motion:reduce) {
	.hero-media video {
		transition: none
	}
}