@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: 0;
}
* {
	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;
}
.font-han {
  font-family: "Black Han Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.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-hero {
	display:block;
	font-size:15px;
	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:24px;
	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: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	background:rgba(255,255,255,.97);
  
  /* 위치 및 배경 전환 애니메이션 */
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
  transform: translateY(0);
}

/* 150px 미만일 때의 기본 상태 (white 클래스) */
header.white {
	position:absolute;
	top:0;
	width:100%;
    background: transparent;
    border-bottom: 0;
}

/* 150px 이상일 때 적용될 고정 헤더 상태 */
header:not(.white) {
  background-color: rgba(255, 255, 255, 0.75); /* 원하는 색상으로 변경 */
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 150px 경계를 넘을 때 자연스럽게 위에서 쓱 내려오는 클래스 */
header.is-fixed {
  animation: slideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#solutions,
#experience,
#contact,
section[id] {
  scroll-margin-top: 86px !important;
}
@media (max-width: 760px) {
	#solutions,
	#experience,
	#contact,
	section[id] {
	  scroll-margin-top: 72px !important;
	}
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.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 img{
	width:9rem;
}
header .brand .logo-wh{display:none}
header .brand .logo{display:inline-block}
header.white .brand .logo-wh{display:inline-block}
header.white .brand .logo{display:none}

.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)
}
header.white .nav{
	height: 86px;
    flex-wrap: wrap;
    align-content: flex-end;
}
.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
}
#service{
	padding-bottom:70px;
}
.hero-banner {
	width: 100%;
	max-width: var(--max);
	margin: auto;	
	margin-bottom: 110px;	
	height: 165px;
	background-image: url('assets/img01.png');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}
@media (max-width: 768px) {
  .hero-banner {
	background-position: center bottom -10px;
  }
	#service{
		padding-bottom:0;
	}  
}
@media (max-width: 1240px) {
  .hero-banner {
	background-position: center bottom -10px;
	margin-bottom:0px;
  }
}
.overview, .solutions  {
	background:#F4F1FA
}
.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;
	margin-bottom:36px;
	gap:0
}
.tabs button {
	flex: 1;
	background: none;
	border: 0;
	/* border-bottom: 3px solid transparent; */
	padding: 17px 12px;
	color: var(--steal);
	font-size: 15px;
	font-weight: 600;
	border: 1px solid var(--steal);
	margin: 0 -1px 0 0;
	background-color: rgba(255, 255, 255, .3);
}
.tabs button[aria-selected=true] {
	background-color:var(--steal);
	border:1px solid var(--steal);
	color:#ffffff;
}
@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:#eae5f3;
	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:#f9f5ff;
	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:80px
}
.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:3rem; fill:var(--steal)}
.time-row img{width:3rem;}
.time-row b {
	font-size:70px;
	color:var(--steal);
	line-height:1
}
.time-row span {
	font-size:15px;
	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
}
.solution-section {
  position: relative;
  overflow: hidden;
}

/* 콘텐츠 영역은 배경보다 위에 오도록 설정 */
.section-content {
  position: relative;
  z-index: 1;
}

/* 배경 원 컨테이너 (클릭 방해 없도록 pointer-events: none) */
.bg-orb-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.bg-orb-container .wrap{
	position:relative;
	height:100%;
	max-width:1500px;
}
/* 원 공통 속성 */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px); /* 몽환적이고 부드러운 효과. 취향에 따라 40px~80px 조절 */
  opacity: 0.55;
  will-change: transform;
}

/* --- [우측 상단 원들] --- */
.orb-tr-1 {
  width: 380px;
  height: 380px;
  top: -80px;
  right: -60px;
  background: radial-gradient(circle, rgba(0, 192, 212, 0.7) 0%, rgba(0, 192, 212, 0) 70%);
  animation: floatTopRight1 10s ease-in-out infinite alternate;
}

.orb-tr-2 {
  width: 260px;
  height: 260px;
  top: 60px;
  right: 120px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.45) 0%, rgba(99, 102, 241, 0) 70%);
  animation: floatTopRight2 14s ease-in-out infinite alternate;
}

/* --- [좌측 하단 원들] --- */
.orb-bl-1 {
  width: 420px;
  height: 420px;
  bottom: -100px;
  left: -80px;
  background: radial-gradient(circle, rgba(147, 130, 255, 0.6) 0%, rgba(147, 130, 255, 0) 70%);
  animation: floatBottomLeft1 12s ease-in-out infinite alternate;
}

.orb-bl-2 {
  width: 280px;
  height: 280px;
  bottom: 80px;
  left: 100px;
  background: radial-gradient(circle, rgba(0, 192, 212, 0.4) 0%, rgba(0, 192, 212, 0) 70%);
  animation: floatBottomLeft2 16s ease-in-out infinite alternate;
}

/* --- 움직임 키프레임 (Keyframes) --- */
@keyframes floatTopRight1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, 40px) scale(1.08);
  }
  100% {
    transform: translate(25px, 20px) scale(0.95);
  }
}

@keyframes floatTopRight2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(35px, -25px) scale(1.12);
  }
  100% {
    transform: translate(-20px, 30px) scale(0.9);
  }
}

@keyframes floatBottomLeft1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, -35px) scale(1.06);
  }
  100% {
    transform: translate(-20px, 25px) scale(0.96);
  }
}

@keyframes floatBottomLeft2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, -30px) scale(1.1);
  }
  100% {
    transform: translate(25px, 20px) scale(0.92);
  }
}
.orb-tr-multi {
  position: absolute;
  top: -120px;
  right: -90px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  /* 시안 + 인디고 퍼플 + 은은한 골드오렌지(배지 포인트 컬러) 매칭 */
  background: conic-gradient(
    from 0deg,
    rgba(0, 212, 235, 0.7),
    rgba(124, 77, 255, 0.7),
    rgba(255, 152, 0, 0.4),
    rgba(0, 212, 235, 0.7)
  );
  filter: blur(55px);
  opacity: 0.65;
  animation: rotateAndFloat 14s linear infinite;
  will-change: transform;
}

/* --- 시안 네온 글로우 보조 구체 --- */
.orb-tr-cyan {
  position: absolute;
  top: 50px;
  right: 140px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.65) 0%, rgba(0, 229, 255, 0) 70%);
  filter: blur(40px);
  opacity: 0.7;
  animation: pulseCyan 7s ease-in-out infinite alternate;
}

/* --- 세련미를 더해주는 선명한 반투명 테두리 링 --- */
.orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 192, 212, 0.35);
  box-shadow: 0 0 15px rgba(0, 192, 212, 0.15), inset 0 0 15px rgba(0, 192, 212, 0.1);
  will-change: transform;
}

.ring-1 {
  width: 220px;
  height: 220px;
  top: 30px;
  right: 60px;
  animation: floatRing1 9s ease-in-out infinite alternate;
}

.ring-2 {
  width: 140px;
  height: 140px;
  top: 140px;
  right: 220px;
  border-color: rgba(124, 77, 255, 0.3);
  animation: floatRing2 11s ease-in-out infinite alternate;
}

/* --- 반짝이며 떠다니는 미니 도트 파티클 --- */
.sparkle-dot {
  position: absolute;
  border-radius: 50%;
  background: #00d4eb;
  box-shadow: 0 0 10px #00e5ff;
}

.dot-1 {
  width: 9px;
  height: 9px;
  top: 90px;
  right: 260px;
  animation: twinkleDot 4s ease-in-out infinite alternate;
}

.dot-2 {
  width: 6px;
  height: 6px;
  top: 180px;
  right: 120px;
  background: #7c4dff;
  box-shadow: 0 0 8px #7c4dff;
  animation: twinkleDot 5s 1s ease-in-out infinite alternate;
}

.dot-3 {
  width: 12px;
  height: 12px;
  top: 40px;
  right: 190px;
  animation: twinkleDot 6s 2s ease-in-out infinite alternate;
}

/* --- 키프레임 애니메이션 정의 --- */

/* 1. 멀티 그라데이션 회전 & 부유 */
@keyframes rotateAndFloat {
  0% {
    transform: rotate(0deg) translate(0, 0) scale(1);
  }
  50% {
    transform: rotate(180deg) translate(-25px, 20px) scale(1.1);
  }
  100% {
    transform: rotate(360deg) translate(0, 0) scale(1);
  }
}

/* 2. 네온 시안 펄스 */
@keyframes pulseCyan {
  0% {
    transform: scale(0.9) translate(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.15) translate(20px, -15px);
    opacity: 0.8;
  }
}

/* 3. 링 부유 모션 */
@keyframes floatRing1 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(-25px, 35px) rotate(45deg);
  }
}

@keyframes floatRing2 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(30px, -20px) rotate(-30deg);
  }
}

/* 4. 미니 도트 반짝임 */
@keyframes twinkleDot {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0.3;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-25px) scale(1.25);
    opacity: 0.4;
  }
}
.experience {
	background:#11152b;
	color:#fff;
	position:relative;
	overflow:hidden;
}
.experience-bg{
	background-image: url(assets/bg-man.png);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
	min-height:100svh;
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
.experience-layout {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:100px;
	align-items: self-start;
	z-index:2;
}
.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 #5e6279;
	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;
	max-width:700px;
}
.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 p a, .footer-grid p a:hover
	color:#a6aabd;
}
.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:900px) {
	.experience-layout,.company-layout {
		grid-template-columns:1fr;
		gap:40px
	}
	.experience-bg {
		background-image: none;
	}
	.scenario-options {
		flex-direction:row;
		flex-wrap:wrap
	}	
}	
@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)
	}
	header.white .menu-toggle {
		display:block;
		background:none;
		border:0;
		font-size:22px;
		color:#ffffff;
	}	
	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 h2 {
		font-size:34px
	}
	.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:600px) {
    .experience {
        background-image: none;
    }	
}
@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:190px;
	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 기본 설정 */
.h0{position:absolute; width:1px; height:0;}
.hero {
  position: relative;
  overflow: hidden;
  height: calc(100svh);
  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);
}
.text-center{text-align:center;}
.table-title{font-size: 14px; font-weight: 650; line-height: 1.5;}
.table{margin-top:.5rem; border:1px solid #dddddd; width:100%; caption-side: bottom; border-collapse: collapse; font-size:13px;}
.table th, .table td{border:1px solid #dddddd; margin:0; font-weight:normal; padding:5px 10px; color:var(--text-muted);}
body.modal-open{overflow:hidden}
.contact-trigger{padding:16px 3rem;border:0;border-radius:6px;background:white;color:#6d28d9;font:inherit;font-weight:700;cursor:pointer}
.contact-modal{box-sizing:border-box;width:calc(100% - 32px);max-width:800px;height:90svh;max-height:90svh;margin:auto;padding:0;border:0;border-radius:20px;background:#fff;color:#253047;overflow:hidden;box-shadow:0 24px 80px #0004}
.contact-modal::backdrop{background:rgba(10,12,25,.65);backdrop-filter:blur(5px)}
.contact-modal__layout{height:100%;display:flex;flex-direction:column}
.contact-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px;border-bottom:1px solid #e7e8ef;flex-shrink:0}
.contact-modal__header h2{margin:0;font-size:20px}
.contact-modal__close{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#f3f1f8;color:#4b445a;font-size:28px;cursor:pointer; padding-bottom:5px;
    line-height: 1;}
.contact-modal__body{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:28px}
.contact-modal button:focus-visible,.contact-trigger:focus-visible{outline:1px solid #8b5cf6;outline-offset:1px}
@media(max-width:600px){.contact-modal{border-radius:14px}.contact-modal__header{padding:16px 20px}.contact-modal__body{padding:22px 20px}.contact-modal__header h2{font-size:21px}}
.contact-form{display:grid;gap:20px}
.contact-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form textarea{box-sizing:border-box;width:100%;padding:13px 14px;border:1px solid #d3dceb;border-radius:6px;font:inherit;font-size:16px;z-index:1}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form__note{margin:0;text-align:right;font-size:12px; display: inline-flex; align-items: center; justify-content: flex-end;}
.contact-form__message{margin-top:20px}
.contact-form__submit{justify-self:center;border:0;border-radius:30px;padding:13px 30px;background:#111;color:#fff;font:inherit;cursor:pointer}
.required{color:#ed4555}#contact-status{font-size:14px;color:#6d28d9;margin:0;text-align:center}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:#8b65e3;box-shadow:0 0 0 3px #7c3aed15}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* 흰색 배경으로 덮어씌우기 (원하는 배경색으로 변경) */
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  
  /* 자동완성 시 글자 색상 유지 */
  -webkit-text-fill-color: #333333 !important;
  
  /* 폰트 스타일 유지 */
  font-family: inherit;
}
/* 1. 감싸는 컨테이너 */
.input {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  margin-top: 0;
  width: 100%;
  max-width: 100%;
}

/* 2. input 스타일링 */
.input input {
  width: 100%;
  height: 48px;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background-color: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 포커스 시 테두리 강조 */
.input input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgb(144 120 243 / 15%);
}

/* 3. 라벨 기본 위치 (input 안쪽 가운데 배치) */
.input label {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	color: #6b7280;
	pointer-events: none; /* 클릭 통과 */
	background-color: #fff;
	padding: 10px 4px;
	width: calc(100% - 30px);
	line-height: 1;
	transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}
.input label img {
  width: 12px;
  height: 12px;
  display: block;
}
.input input:focus + label,
.input input:valid + label {
  top: 0;
  font-size: 12px;
	padding: 0 4px;
	width: auto;
  color: var(--purple); /* 올라갔을 때 텍스트 색상 */
}
.input input:not(:focus):valid + label {
  color: #4b5563;
}
.input input::placeholder {
  color: transparent;
  transition: color 0.2s ease;
}
.input input:focus::placeholder {
  color: #9ca3af;
}
@media(max-width:600px){.contact-form__grid{grid-template-columns:1fr}}
@media(max-width:600px){.rs-contact{padding:56px 16px 60px}.rs-contact__intro{margin-bottom:30px}.rs-contact__eyebrow{font-size:10px;margin-bottom:20px}.rs-contact__subtitle{font-size:14px;margin-top:20px}.rs-contact__form{padding:24px 22px 28px;border-radius:18px}.rs-contact__grid{grid-template-columns:1fr;gap:20px}.rs-contact__required-note{font-size:11px;margin-bottom:23px}.rs-contact__message{margin-top:24px}.rs-contact input,.rs-contact textarea{font-size:16px}.rs-contact__submit{font-size:16px}}
@media(prefers-reduced-motion:reduce){.rs-contact *{transition:none!important}}
@media(max-width:760px) {
	.hero-video-background {
		min-height:600px
	}
	header.white .nav{
		flex-wrap: wrap;
		align-content: center;
	}	
	.hero-video-background .hero-grid {
		padding-top:120px;
		padding-bottom:70px
	}
	.hero-video-background h1 {
		font-size:clamp(36px,7vw,44px)
	}
	.hero-poster,.hero-media video {
		object-position:60% center
	}
	.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
	}
}