/* 오르카랩 랜딩 v2 — 깊은 밤바다 톤, 파랑·민트 발광 */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --bg: #04060c; --bg-2: #070b16; --bg-3: #0b1122;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --text: #eef2ff; --sub: #a3aecb; --faint: #6f7a96;
  --blue: #2e6bff; --blue-2: #5b8cff; --sky: #8fb6ff; --mint: #35d0a5; --cyan: #22d3ee;
  --grad: linear-gradient(100deg, #a7c6ff 0%, #5b8cff 42%, #35d0a5 100%);
  --wrap: 1280px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --f-kr: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --f-en: "Unbounded", "Pretendard Variable", Pretendard, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
body {
  background: var(--bg); color: var(--text); font-family: var(--f-kr); line-height: 1.6; letter-spacing: -0.01em;
  word-break: keep-all; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: rgba(46,107,255,.5); color: #fff; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }

/* 필름 입자 */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(3) infinite;
}
@keyframes grain { 0% { transform: translate(0,0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0,0); } }

/* 글자 그라데이션 */
.g, em.g { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp em.g { background: none; color: inherit; -webkit-background-clip: initial; background-clip: initial; }
.sp em.g .wi { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
em { font-style: normal; }

/* 살아 있는 점 */
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--mint); animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }

/* ---------- 버튼 ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px;
  border-radius: 999px; font-weight: 700; font-size: 16.5px; letter-spacing: -.01em; white-space: nowrap; color: #fff;
  overflow: hidden; isolation: isolate; transition: background .35s, box-shadow .35s, border-color .35s, color .35s;
}
.btn .arr { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: linear-gradient(100deg, #3f7bff, #2e6bff 55%, #2458e0); box-shadow: 0 12px 40px -12px rgba(46,107,255,.9), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-130%); transition: transform .9s var(--ease); }
.btn-primary:hover::after { transform: translateX(130%); }
.btn-primary:hover { box-shadow: 0 16px 50px -10px rgba(46,107,255,1), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost { background: rgba(255,255,255,.05); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
.mag { transition: transform .5s var(--ease), background .35s, box-shadow .35s, border-color .35s; will-change: transform; }

/* ---------- 제목 공통 ---------- */
.sec { position: relative; padding: 170px 0; }
.sec-head { max-width: 1000px; }
.sec-head.center { margin: 0 auto; text-align: center; }
.sec-head.center .lead { margin-left: auto; margin-right: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-en); font-size: 12.5px; font-weight: 500; letter-spacing: .12em; color: var(--sky); }
.eyebrow b { font-weight: 500; color: var(--faint); }
.h2 { font-size: clamp(32px, 4.4vw, 64px); line-height: 1.1; font-weight: 800; letter-spacing: -.05em; margin: 22px 0 24px; }
.lead { font-size: clamp(16px, 1.45vw, 19.5px); color: var(--sub); max-width: 620px; line-height: 1.75; }

/* 단어별로 아래에서 올라오는 글자 */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.wi { display: inline-block; transform: translateY(112%) rotate(3deg); transform-origin: 0 100%; transition: transform 1.15s var(--ease); transition-delay: calc(var(--d, 0) * 42ms); }
.in .wi, .in.wi { transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(38px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- 첫 방문 인사 화면 ---------- */
#loader { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease); animation: ldfail 0s 7s forwards; }
#loader.out { clip-path: inset(0 0 100% 0); }
@keyframes ldfail { to { visibility: hidden; } }
.no-js #loader, .rm #loader { display: none; }
.ld-mark { display: flex; align-items: center; gap: 16px; }
.ld-mark img { width: 64px; height: 64px; border-radius: 15px; animation: ldpop .9s var(--ease) both; }
.ld-word { display: flex; font-family: var(--f-en); font-weight: 800; font-size: clamp(28px, 4.4vw, 52px); letter-spacing: .02em; }
.ld-word i { font-style: normal; display: inline-block; animation: ldup .9s var(--ease) both; }
.ld-word i:nth-child(1) { animation-delay: .05s; } .ld-word i:nth-child(2) { animation-delay: .09s; } .ld-word i:nth-child(3) { animation-delay: .13s; } .ld-word i:nth-child(4) { animation-delay: .17s; }
.ld-word i:nth-child(6) { animation-delay: .23s; } .ld-word i:nth-child(7) { animation-delay: .27s; } .ld-word i:nth-child(8) { animation-delay: .31s; }
.ld-sub { color: var(--sub); font-size: 15px; animation: ldfade 1s .35s var(--ease) both; }
.ld-num { position: absolute; right: 40px; bottom: 26px; font-family: var(--f-en); font-weight: 800; font-size: clamp(56px, 10vw, 150px); line-height: 1; color: rgba(255,255,255,.07); }
.ld-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.06); }
.ld-bar i { position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(var(--p, 0)); }
@keyframes ldup { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ldpop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ldfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 커서 ---------- */
.cursor { display: none; }
.has-cursor .cursor { display: block; }
.has-cursor body { cursor: none; }
.has-cursor input, .has-cursor textarea { cursor: text; }
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none; border-radius: 50%; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; mix-blend-mode: difference; }
.cur-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid rgba(255,255,255,.45); display: grid; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .35s, border-color .35s, opacity .3s; }
.cur-ring span { font-style: normal; font-size: 13px; font-weight: 800; color: #fff; opacity: 0; transition: opacity .25s; white-space: nowrap; }
.cur-hover .cur-ring { width: 66px; height: 66px; margin: -33px 0 0 -33px; background: rgba(91,140,255,.12); border-color: rgba(143,182,255,.8); }
.cur-label .cur-ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--blue); border-color: var(--blue); }
.cur-label .cur-ring span { opacity: 1; }
.cur-hide .cur-dot, .cur-hide .cur-ring { opacity: 0; }

/* 읽은 만큼 차는 줄 */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 70; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }

/* ---------- 머리글 ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 60; border-bottom: 1px solid transparent; transition: background .45s, border-color .45s, backdrop-filter .45s; }
.top.scrolled { background: rgba(4,6,12,.6); border-color: var(--line); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }
.top .wrap { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.logo img { width: 36px; height: 36px; flex: none; border-radius: 9px; }
.logo .en { font-family: var(--f-en); font-size: 10.5px; font-weight: 500; letter-spacing: .22em; color: var(--faint); }
.nav { display: flex; align-items: center; gap: 26px; }
.nl { position: relative; font-size: 15px; font-weight: 600; color: rgba(238,242,255,.7); transition: color .3s; }
.nl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--grad); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease); }
.nl:hover { color: #fff; }
.nl:hover::after { transform: scaleX(1); transform-origin: left; }
.top .btn { height: 44px; padding: 0 20px; font-size: 15px; }
.burger { display: none; position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); }
.burger i { position: absolute; left: 14px; right: 14px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .5s var(--ease), top .5s var(--ease); }
.burger i:nth-child(1) { top: 18px; } .burger i:nth-child(2) { top: 26px; }
.menu-open .burger i:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-open .burger i:nth-child(2) { top: 22px; transform: rotate(-45deg); }
.mnav { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: center; padding: 100px 28px 40px; background: #04060c; clip-path: circle(0% at calc(100% - 46px) 39px); transition: clip-path .9s var(--ease); pointer-events: none; visibility: hidden; }
.menu-open .mnav { clip-path: circle(150% at calc(100% - 46px) 39px); pointer-events: auto; visibility: visible; }
.mnav a:not(.btn) { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; font-size: clamp(28px, 8vw, 40px); font-weight: 800; letter-spacing: -.045em; opacity: 0; transform: translateY(26px); transition: opacity .6s, transform .7s var(--ease); }
.mnav a b { font-family: var(--f-en); font-size: 12px; font-weight: 500; color: var(--faint); }
.mnav .btn { margin-top: 30px; opacity: 0; transition: opacity .6s .4s; }
.menu-open .mnav a { opacity: 1; transform: none; }
.menu-open .mnav a:nth-child(2) { transition-delay: .05s; } .menu-open .mnav a:nth-child(3) { transition-delay: .1s; }
.menu-open .mnav a:nth-child(4) { transition-delay: .15s; } .menu-open .mnav a:nth-child(5) { transition-delay: .2s; }
.menu-open .mnav a:nth-child(6) { transition-delay: .25s; } .menu-open .mnav a:nth-child(7) { transition-delay: .3s; }

/* ---------- 첫 화면 ---------- */
#hero { position: relative; height: 300vh; }
.hero-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-aura { position: absolute; inset: 0; background:
  radial-gradient(38% 50% at 72% 46%, rgba(46,107,255,.30), transparent 70%),
  radial-gradient(26% 34% at 86% 84%, rgba(53,208,165,.16), transparent 70%),
  radial-gradient(50% 60% at 6% 0%, rgba(91,140,255,.12), transparent 70%); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 62% 44%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 62% 44%, #000 10%, transparent 75%); }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-fallback { position: absolute; right: 9%; top: 50%; height: 74vh; width: auto; transform: translateY(-50%) rotate(-4deg); filter: drop-shadow(0 50px 80px rgba(0,0,0,.7)); }
.hero-copy { position: absolute; inset: 0; pointer-events: none; }
.hero-copy .wrap { height: 100%; }
.hs-box { position: relative; height: 100%; max-width: 760px; }
.hs { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; will-change: transform, opacity; }
.hs .btn, .hs a { pointer-events: auto; }
.js .hs2, .js .hs3 { opacity: 0; visibility: hidden; }
.hero-eb { margin-bottom: 26px; font-family: var(--f-kr); font-size: 14px; font-weight: 600; letter-spacing: 0; color: #cfd8f0; }
.hero-h1 { font-size: clamp(34px, 3.5vw, 52px); line-height: 1.16; font-weight: 800; letter-spacing: -.055em; }
.hero-p { margin-top: 24px; max-width: 660px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.75; color: var(--sub); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.hs-small { font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; color: var(--sub); }
.hs-big { font-family: var(--f-en); font-weight: 800; font-size: clamp(110px, 17vw, 250px); line-height: .92; letter-spacing: -.05em; margin: 6px 0 0 -6px; }
.hs-big .g { padding-right: .04em; }
.hs-h { font-size: clamp(36px, 4.8vw, 72px); line-height: 1.08; font-weight: 800; letter-spacing: -.05em; margin-top: 10px; }
.js .hs1 > * { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .hs1 .hero-h1 { opacity: 1; transform: none; }
.intro .hs1 > * { opacity: 1; transform: none; }
.intro .hs1 .hero-p { transition-delay: .35s; } .intro .hs1 .hero-cta { transition-delay: .5s; } .intro .hs1 .hero-eb { transition-delay: .05s; } .intro .hs1 .hero-trust { transition-delay: .65s; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 30px; pointer-events: none; opacity: 0; transition: opacity 1s .8s; }
.intro .hero-foot { opacity: 1; }
.hero-foot .wrap { display: flex; justify-content: space-between; align-items: flex-end; }
.hero-hint { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--sub); }
.mouse { position: relative; width: 24px; height: 38px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 14px; }
.mouse i { position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(13px); } }
.hero-steps { position: relative; display: flex; gap: 28px; padding-bottom: 14px; }
.hero-steps li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--faint); transition: color .5s; }
.hero-steps li b { font-family: var(--f-en); font-size: 11px; font-weight: 500; letter-spacing: .1em; }
.hero-steps li.on { color: #fff; }
.hero-steps .hsbar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.hero-steps .hsbar i { position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(0); }
/* 움직임을 줄였거나 3D 를 못 쓰면: 첫 화면 한 장으로 */
.rm #hero, .no-gl #hero { height: auto; }
.rm .hero-stick, .no-gl .hero-stick { position: relative; height: auto; min-height: 100svh; }
.rm .hs-box, .no-gl .hs-box { height: 100svh; min-height: 640px; }
.rm .hs2, .rm .hs3, .no-gl .hs2, .no-gl .hs3, .rm .hero-foot, .no-gl .hero-foot { display: none; }
.rm .hs1 > *, .no-gl.intro .hs1 > * { opacity: 1; transform: none; }

/* ---------- 흐르는 띠 ---------- */
.band { position: relative; padding: 38px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg), var(--bg-2)); overflow: hidden; }
.mq { display: flex; overflow: hidden; white-space: nowrap; will-change: transform; }
.mq + .mq { margin-top: 14px; }
.mq-in { display: flex; flex: none; align-items: center; gap: 42px; padding-right: 42px; animation: mq 64s linear infinite; }
.mq2 .mq-in { animation-duration: 72s; animation-direction: reverse; }
@keyframes mq { to { transform: translateX(-100%); } }
.mi { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(28px, 4vw, 58px); font-weight: 800; letter-spacing: -.045em; line-height: 1.15; }
.mq2 .mi { color: rgba(170,190,235,.16); }
.dia { width: 12px; height: 12px; flex: none; border-radius: 3px; background: var(--grad); transform: rotate(45deg); }
.rm .mq-in { animation: none; }

/* ---------- 01 직접 눌러 보기 ---------- */
.demo { position: relative; padding: 180px 0 160px; overflow: hidden; }
.demo::before { content: ""; position: absolute; right: -12%; top: 6%; width: 64vw; height: 64vw; background: radial-gradient(closest-side, rgba(46,107,255,.2), transparent 70%); pointer-events: none; }
.demo-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.demo-try { margin: 34px 0 24px; display: grid; gap: 14px; }
.demo-try li { display: flex; align-items: center; gap: 14px; font-size: 16.5px; color: #dfe5f7; }
.demo-try li i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; font-style: normal; font-family: var(--f-en); font-size: 11.5px; font-weight: 700; color: var(--mint); background: rgba(53,208,165,.13); border: 1px solid rgba(53,208,165,.25); }
.note { font-size: 14px; color: var(--faint); margin-bottom: 30px; }
.demo-stage { position: relative; height: 760px; display: grid; place-items: center; perspective: 1600px; }
.demo-phone { position: relative; width: 336px; height: 700px; padding: 14px; border-radius: 54px; background: linear-gradient(150deg, #34405f, #0f1629 45%, #2a3452); box-shadow: 0 70px 130px -40px rgba(0,0,0,.95), inset 0 0 0 1.5px rgba(190,206,242,.5), 0 0 90px -10px rgba(46,107,255,.45); transform-style: preserve-3d; transition: transform .9s var(--ease); animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.demo-screen { position: relative; width: 100%; height: 100%; border-radius: 41px; overflow: hidden; background: #fff; }
.sbar { position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 4px 26px 0 30px; background: #fff; color: #0f1629; font-size: 13px; font-weight: 700; }
.sbar i { width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid #0f1629; position: relative; }
.sbar i::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; border-radius: 1px; background: #0f1629; }
.demo-screen iframe { position: absolute; left: 0; top: 40px; width: 390px; max-width: none; border: 0; transform-origin: 0 0; opacity: 0; transition: opacity .7s; background: #fff; }
.demo-screen.ready iframe { opacity: 1; }
.demo-skel { position: absolute; inset: 0; background: linear-gradient(110deg, #eef1f6 30%, #fbfcfe 50%, #eef1f6 70%); background-size: 220% 100%; animation: skel 1.3s linear infinite; }
.ready .demo-skel { display: none; }
@keyframes skel { to { background-position: -220% 0; } }
.island { position: absolute; top: 25px; left: 50%; width: 98px; height: 28px; margin-left: -49px; border-radius: 20px; background: #05070d; z-index: 3; pointer-events: none; }
.demo-cover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; padding-bottom: 64px; font-size: 17px; font-weight: 800; color: #fff; background: linear-gradient(180deg, rgba(4,6,12,0) 35%, rgba(4,6,12,.78)); }
.demo-cover .tap { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); animation: ping 2s infinite; }
.demo-cover .tap svg { width: 30px; height: 30px; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(46,107,255,.6); } 70% { box-shadow: 0 0 0 24px rgba(46,107,255,0); } 100% { box-shadow: 0 0 0 0 rgba(46,107,255,0); } }
.live-on .demo-cover { display: none; }
.live-on.demo-phone { animation: none; }
.fchip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(14,20,40,.72); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 14.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 24px 50px -24px rgba(0,0,0,.9); will-change: transform; }
.fchip i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-style: normal; font-weight: 800; font-size: 14px; }
.fc1 { left: 0; top: 17%; } .fc2 { right: -2%; top: 42%; } .fc3 { left: 4%; bottom: 14%; }

/* ---------- 02 만든 서비스 ---------- */
.work { position: relative; background: linear-gradient(180deg, var(--bg), var(--bg-2) 30%, var(--bg)); }
.work-pin { position: relative; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding-top: 104px; overflow: hidden; }
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 30px; }
.work-head .h2 { font-size: clamp(30px, 3.5vw, 54px); margin: 14px 0 0; }
.work-meta { display: grid; gap: 18px; justify-items: end; text-align: right; max-width: 380px; }
.work-meta .lead { font-size: 16px; }
.work-count { display: flex; align-items: center; gap: 10px; font-family: var(--f-en); }
.work-count b { font-size: 42px; font-weight: 700; line-height: 1; }
.work-count span { color: var(--faint); font-size: 14px; }
.wc-bar { position: relative; width: 150px; height: 2px; margin-left: 8px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.wc-bar i { position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(.2); }
.work-track { flex: 1; min-height: 0; display: flex; gap: 28px; padding: 0 40px 48px max(40px, calc((100vw - var(--wrap)) / 2 + 40px)); will-change: transform; }
.case { position: relative; flex: none; width: min(1120px, 80vw); height: 100%; display: grid; grid-template-columns: .92fr 1.08fr; border-radius: 34px; overflow: hidden; isolation: isolate; border: 1px solid var(--line); background: #070c1a; }
.case-bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 75% at 80% 38%, color-mix(in srgb, var(--c) 42%, transparent), transparent 72%),
  radial-gradient(40% 50% at 8% 100%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); }
.case::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.case-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: clamp(28px, 3.4vw, 54px); }
.case-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--sub); }
.case-top .live { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 10px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.case h3 { font-size: clamp(32px, 3.8vw, 60px); line-height: 1.06; font-weight: 800; letter-spacing: -.055em; }
.case-desc { max-width: 450px; font-size: 16px; line-height: 1.72; color: #c3cbe1; }
.case-stats { display: flex; gap: 28px; margin: 4px 0; }
.case-stats b { display: block; font-family: var(--f-en); font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.case-stats span { font-size: 13px; color: var(--faint); }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-tags span { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #dfe5f3; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.case .btn { align-self: flex-start; margin-top: 8px; }
.case-media { position: relative; z-index: 1; will-change: transform; }
.case-lap { position: absolute; right: -8%; top: 11%; width: 110%; padding: 8px; border-radius: 16px; background: #131a2e; box-shadow: 0 60px 110px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.09); }
.case-lap .bar { display: flex; align-items: center; gap: 6px; padding: 2px 4px 8px; }
.case-lap .bar i { width: 8px; height: 8px; border-radius: 50%; background: #394260; }
.case-lap .bar span { flex: 1; margin-left: 8px; height: 19px; line-height: 19px; padding-left: 10px; border-radius: 6px; font-size: 10.5px; color: #8993ad; background: #1f273e; overflow: hidden; }
.case-lap img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; border-radius: 7px; background: #fff; }
.case-ph { position: absolute; left: 2%; bottom: 7%; width: 27%; padding: 6px; border-radius: 28px; background: #05070d; box-shadow: 0 44px 90px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.14); }
.case-ph img { width: 100%; aspect-ratio: 390/800; object-fit: cover; object-position: top; border-radius: 22px; background: #fff; }
.case-end { width: min(760px, 66vw); grid-template-columns: 1fr; place-items: center; text-align: center; background: radial-gradient(65% 65% at 50% 50%, rgba(46,107,255,.28), transparent 72%), #070b18; }
.end-in { display: grid; justify-items: center; gap: 20px; max-width: 520px; padding: 40px; }
.end-in h3 { font-size: clamp(36px, 4.4vw, 66px); }
.end-in p { color: var(--sub); font-size: 17px; }
.end-in .btn { align-self: center; }

/* ---------- 03 약속 ---------- */
.stack { display: grid; gap: 34px; margin-top: 80px; padding-bottom: 6vh; }
.pcard { position: sticky; top: calc(116px + var(--i) * 26px); min-height: 440px; display: grid; grid-template-columns: auto 1fr .92fr; align-items: center; gap: clamp(24px, 3.4vw, 52px); padding: clamp(28px, 3.6vw, 56px); border-radius: 34px; overflow: hidden; background: linear-gradient(160deg, #0e1529, #080c19 60%); border: 1px solid var(--line-2); box-shadow: 0 -40px 80px -50px rgba(0,0,0,.95); transform-origin: 50% 0; will-change: transform; }
.pcard::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 60% at 88% 26%, rgba(46,107,255,.2), transparent 70%); }
.pc-num { align-self: start; font-family: var(--f-en); font-weight: 800; font-size: clamp(64px, 8vw, 128px); line-height: .9; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-body { position: relative; }
.pc-worry { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 16.5px; color: var(--faint); }
.pc-worry b { flex: none; padding: 3px 9px; border-radius: 7px; font-size: 12px; color: #ffb3bd; background: rgba(255,90,110,.12); border: 1px solid rgba(255,90,110,.25); }
.pc-worry span { position: relative; }
.pc-worry span::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; border-radius: 2px; background: #ff5a6e; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .15s; }
.pcard.struck .pc-worry span::after { transform: scaleX(1); }
.pc-promise { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.16; font-weight: 800; letter-spacing: -.05em; }
.pc-desc { margin-top: 18px; max-width: 470px; font-size: 16.5px; line-height: 1.75; color: var(--sub); }
.pc-viz { position: relative; height: 320px; border-radius: 26px; overflow: hidden; background: rgba(255,255,255,.025); border: 1px solid var(--line); }

/* 01: 시제품이 만들어지고 알림이 뜬다 */
.vp-ph { position: absolute; left: 50%; top: 26px; width: 150px; height: 300px; margin-left: -75px; padding: 7px; border-radius: 28px; background: #0b1020; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -20px rgba(0,0,0,.8); }
.vp-scr { position: relative; height: 100%; border-radius: 22px; overflow: hidden; background: #f4f6fb; padding: 26px 12px; display: grid; align-content: start; gap: 9px; }
.vp-scr i { display: block; border-radius: 8px; background: #dde3ef; transform-origin: left; transform: scaleX(0); }
.vp-l { height: 10px; } .vp-l.l2 { width: 60%; }
.vp-card { height: 56px; background: linear-gradient(135deg, #5b8cff, #35d0a5) !important; }
.vp-card.c2 { height: 44px; background: #e6ebf5 !important; }
.vp-btn { height: 30px; margin-top: 6px; background: #2e6bff !important; border-radius: 99px !important; }
.vp-toast { position: absolute; left: 50%; top: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; white-space: nowrap; background: rgba(255,255,255,.96); color: #10172b; box-shadow: 0 20px 40px -14px rgba(0,0,0,.6); transform: translate(-50%, -140%); opacity: 0; }
.vp-toast i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 800; color: #fff; background: var(--mint); }
.vp-toast b { display: block; font-size: 13.5px; } .vp-toast span { font-size: 12px; color: #5d6780; }
.vp-day { position: absolute; right: 18px; bottom: 16px; text-align: right; }
.vp-day b { display: block; font-family: var(--f-en); font-size: 30px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vp-day span { font-size: 12px; color: var(--faint); }
.on .vp-scr i { animation: vpbuild 6s var(--ease) infinite; }
.on .vp-scr i:nth-child(2) { animation-delay: .15s; } .on .vp-scr i:nth-child(3) { animation-delay: .3s; } .on .vp-scr i:nth-child(4) { animation-delay: .45s; } .on .vp-scr i:nth-child(5) { animation-delay: .6s; }
.on .vp-toast { animation: vptoast 6s var(--ease) infinite; }
@keyframes vpbuild { 0% { transform: scaleX(0); } 14%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes vptoast { 0%, 22% { transform: translate(-50%, -140%); opacity: 0; } 32%, 84% { transform: translate(-50%, 0); opacity: 1; } 94%, 100% { transform: translate(-50%, -140%); opacity: 0; } }

/* 02: 주차마다 시연 링크에 체크 */
.vz-week { display: grid; align-content: center; gap: 12px; padding: 26px; }
.wk { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); opacity: .35; transform: translateX(16px); transition: opacity .6s, transform .8s var(--ease), border-color .6s; }
.wk span { font-family: var(--f-kr); font-weight: 700; font-size: 15px; width: 48px; }
.wk i { flex: 1; font-style: normal; font-size: 13.5px; color: var(--sky); }
.wk b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; color: #fff; background: var(--mint); transform: scale(0); transition: transform .6s var(--ease); }
.on .wk { opacity: 1; transform: none; border-color: rgba(53,208,165,.3); }
.on .wk b { transform: scale(1); }
.on .wk:nth-child(2), .on .wk:nth-child(2) b { transition-delay: .35s; }
.on .wk:nth-child(3), .on .wk:nth-child(3) b { transition-delay: .7s; }
.on .wk:nth-child(4), .on .wk:nth-child(4) b { transition-delay: 1.05s; }

/* 03: 계약서에 도장이 쾅 */
.ct-paper { position: absolute; left: 50%; top: 50%; width: 220px; padding: 22px 20px; margin: -140px 0 0 -110px; border-radius: 12px; background: #f4f1ea; color: #1b2231; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); transform: rotate(-4deg); }
.ct-paper b { display: block; margin-bottom: 14px; font-size: 16px; text-align: center; }
.ct-paper > i { display: block; height: 7px; margin-bottom: 8px; border-radius: 4px; background: #ddd5c3; }
.ct-paper > i.s { width: 55%; margin-bottom: 16px; }
.ct-paper p { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; border-top: 1px solid #e0d8c6; }
.ct-paper p em { font-weight: 800; color: #2e6bff; }
.ct-stamp { position: absolute; right: 3%; bottom: 4%; width: 124px; height: 124px; display: grid; place-content: center; text-align: center; border-radius: 50%; font-size: 14px; font-weight: 800; color: #ff5a6e; border: 4px solid #ff5a6e; box-shadow: inset 0 0 0 4px rgba(255,90,110,.25); transform: rotate(-14deg) scale(2.4); opacity: 0; }
.ct-stamp b { display: block; font-family: var(--f-en); font-size: 30px; line-height: 1.1; }
.on .ct-stamp { animation: stamp .55s cubic-bezier(.5, 0, .75, 0) .5s forwards; }
@keyframes stamp { 0% { transform: rotate(-14deg) scale(2.4); opacity: 0; } 80% { transform: rotate(-14deg) scale(.94); opacity: 1; } 100% { transform: rotate(-14deg) scale(1); opacity: 1; } }

/* ---------- 04 만들 수 있는 것 ---------- */
.can { background: linear-gradient(180deg, var(--bg), var(--bg-2) 50%, var(--bg)); }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 410px; gap: 18px; margin-top: 72px; }
.tile { position: relative; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--line); }
.t-admin, .t-ai, .t-auto { grid-column: span 2; }
.viz { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.tile-txt { padding: 0 28px 26px; }
.tile h3 { font-size: 22px; font-weight: 800; letter-spacing: -.04em; margin-bottom: 4px; }
.tile p { font-size: 15px; color: var(--sub); }
/* 커서를 따라 빛나는 테두리 */
.spot::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(460px circle at var(--mx, -999px) var(--my, -999px), rgba(91,140,255,.15), transparent 45%); opacity: 0; transition: opacity .45s; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(340px circle at var(--mx, -999px) var(--my, -999px), rgba(160,195,255,.85), transparent 42%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .45s; }
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* 결제 */
.cc { position: absolute; left: 12%; top: 16%; width: 290px; height: 180px; padding: 22px; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, #5b8cff, #2e6bff 45%, #1c3fa8); box-shadow: 0 40px 70px -30px rgba(46,107,255,.9), inset 0 1px 0 rgba(255,255,255,.35); transform: rotate(-8deg) translateY(10px); }
.cc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 62%); background-size: 250% 100%; background-position: 120% 0; }
.cc-chip { width: 42px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #f6d991, #caa24d); }
.cc-brand { position: absolute; right: 22px; top: 22px; font-family: var(--f-en); font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.cc-num { font-family: var(--f-en); font-size: 15px; letter-spacing: .1em; }
.t-pay .toast { position: absolute; right: 10%; top: 30%; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 18px; background: rgba(255,255,255,.97); color: #0f1629; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); opacity: 0; transform: translateY(20px) scale(.9); }
.t-pay .toast i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 800; color: #fff; background: var(--mint); }
.t-pay .toast b { display: block; font-size: 16px; } .t-pay .toast span { font-size: 13px; color: #5d6780; }
.on .cc { animation: ccin 5s var(--ease) infinite; }
.on .cc::after { animation: shine 5s var(--ease) infinite; }
.on .t-pay .toast, .t-pay.on .toast { animation: toast 5s var(--ease) infinite; }
@keyframes ccin { 0% { transform: rotate(-16deg) translate(-40px, 30px); opacity: 0; } 14%, 90% { transform: rotate(-8deg) translateY(10px); opacity: 1; } 100% { transform: rotate(-8deg) translateY(10px); opacity: 0; } }
@keyframes shine { 0%, 20% { background-position: 120% 0; } 45%, 100% { background-position: -40% 0; } }
@keyframes toast { 0%, 32% { opacity: 0; transform: translateY(20px) scale(.9); } 42%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* 카카오 */
.kk { position: absolute; left: 24px; right: 24px; top: 22px; display: grid; gap: 10px; }
.kk-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--sub); }
.kk-h i { width: 22px; height: 22px; border-radius: 7px; background: #fee500; }
.kb { justify-self: start; max-width: 92%; padding: 11px 14px; border-radius: 4px 16px 16px 16px; font-size: 13.5px; line-height: 1.5; color: #191600; background: #fee500; opacity: 0; transform: translateY(12px); }
.kb.b1 { background: #fff; color: #10172b; }
.on .kb { animation: kb 6s var(--ease) infinite; }
.on .kb.b2 { animation-delay: .9s; } .on .kb.b3 { animation-delay: 1.8s; }
@keyframes kb { 0% { opacity: 0; transform: translateY(12px); } 10%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-6px); } }

/* 관리자 화면 */
.dash { position: absolute; inset: 22px 24px 8px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: flex; flex-direction: column; }
.dash-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--sub); }
.dash-top b { font-family: var(--f-en); font-size: 22px; color: #fff; }
.bars { flex: 1; display: flex; align-items: flex-end; gap: 9px; padding-top: 14px; }
.bars i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #5b8cff, rgba(46,107,255,.25)); transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--ease); transition-delay: calc(var(--d) * 80ms); }
.bars i:nth-child(6) { background: linear-gradient(180deg, #35d0a5, rgba(53,208,165,.25)); }
.on .bars i { transform: scaleY(1); }
.spark { position: absolute; left: 16px; right: 16px; top: 44px; width: calc(100% - 32px); height: 50px; overflow: visible; }
.spark path { fill: none; stroke: #35d0a5; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .5s; vector-effect: non-scaling-stroke; }
.on .spark path { stroke-dashoffset: 0; }

/* AI */
.chat { position: absolute; left: 28px; right: 28px; top: 26px; display: grid; gap: 12px; }
.msg { max-width: 78%; padding: 12px 16px; font-size: 14.5px; line-height: 1.55; opacity: 0; transform: translateY(12px); }
.msg.me { justify-self: end; border-radius: 18px 18px 4px 18px; color: #fff; background: var(--blue); }
.msg.ai { justify-self: start; border-radius: 18px 18px 18px 4px; color: #e6ebf8; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.msg.ans b { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px; font-family: var(--f-en); font-size: 10.5px; color: #04121a; background: var(--grad); vertical-align: 1px; }
.typing { display: flex; gap: 5px; padding: 16px 18px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.on .msg.me { animation: m1 6.5s var(--ease) infinite; }
.on .msg.typing { animation: m2 6.5s var(--ease) infinite; }
.on .msg.ans { animation: m3 6.5s var(--ease) infinite; }
@keyframes m1 { 0% { opacity: 0; transform: translateY(12px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes m2 { 0%, 12% { opacity: 0; transform: translateY(12px); height: auto; } 16%, 32% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; } }
@keyframes m3 { 0%, 34% { opacity: 0; transform: translateY(12px); } 42%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.t-ai .chat { grid-template-rows: auto 0 auto; }
.t-ai .msg.typing { grid-row: 2; align-self: start; }
.t-ai .msg.ans { grid-row: 3; margin-top: -6px; }

/* 스토어 앱 */
.mph { position: absolute; left: 50%; top: 16px; width: 156px; height: 196px; margin-left: -78px; padding: 30px 13px 13px; border-radius: 28px; background: linear-gradient(160deg, #1a2340, #0b1020); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -20px rgba(0,0,0,.8); overflow: hidden; }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 44px; }
.apps i { aspect-ratio: 1; border-radius: 9px; background: rgba(255,255,255,.09); }
.apps i:nth-child(3n+1) { background: rgba(91,140,255,.35); } .apps i:nth-child(5) { background: rgba(53,208,165,.4); }
.noti { position: absolute; left: 10px; right: 10px; top: 12px; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 13px; color: #0f1629; background: rgba(255,255,255,.96); transform: translateY(-130%); opacity: 0; }
.noti > i { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--blue); }
.noti b { display: block; font-size: 12px; } .noti span { font-size: 10.5px; color: #5d6780; }
.on .noti { animation: noti 4.5s var(--ease) infinite; }
@keyframes noti { 0%, 18% { transform: translateY(-130%); opacity: 0; } 28%, 84% { transform: none; opacity: 1; } 94%, 100% { transform: translateY(-130%); opacity: 0; } }
.stores { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 8px; }
.stores span { padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--sub); border: 1px solid var(--line-2); }

/* 자동화 */
.flow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 30px; }
.nd { flex: none; padding: 14px 18px; border-radius: 16px; font-size: 14.5px; font-weight: 700; white-space: nowrap; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); transition: border-color .4s, box-shadow .4s, background .4s; }
.nd.hot { background: rgba(46,107,255,.16); border-color: rgba(91,140,255,.6); }
.wire { position: relative; flex: 1; min-width: 26px; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, rgba(143,182,255,.5) 0 6px, transparent 6px 12px); background-size: 24px 2px; }
.wire::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); opacity: 0; }
.on .wire { animation: wire .8s linear infinite; }
.on .wire::after { animation: packet 2.4s var(--ease) infinite; }
.on .wire:nth-of-type(2)::after { animation-delay: .6s; } .on .wire:nth-of-type(3)::after { animation-delay: 1.2s; }
@keyframes wire { to { background-position: 24px 0; } }
@keyframes packet { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 60% { left: calc(100% - 8px); opacity: 1; } 70%, 100% { left: calc(100% - 8px); opacity: 0; } }

/* ---------- 05 진행 방식 ---------- */
.tl { position: relative; max-width: 1040px; margin: 90px auto 0; }
.tl-line { position: absolute; left: 50%; top: 30px; bottom: 30px; width: 2px; margin-left: -1px; background: rgba(255,255,255,.08); border-radius: 2px; }
.tl-fill { position: absolute; inset: 0; background: linear-gradient(180deg, #5b8cff, #35d0a5); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 18px rgba(91,140,255,.6); }
.tl-step { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center; min-height: 190px; }
.tl-node { grid-column: 2; grid-row: 1; justify-self: center; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; position: relative; z-index: 1; font-family: var(--f-en); font-size: 14px; font-weight: 700; color: var(--faint); background: #0a0f1d; border: 1.5px solid var(--line-2); transition: all .6s var(--ease); }
.tl-step.on .tl-node { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 9px rgba(46,107,255,.14), 0 0 44px rgba(46,107,255,.7); }
.tl-card { grid-row: 1; max-width: 430px; opacity: .28; transform: translateY(24px); transition: opacity .7s, transform .9s var(--ease); }
.tl-step.l .tl-card { grid-column: 1; justify-self: end; text-align: right; }
.tl-step.r .tl-card { grid-column: 3; justify-self: start; }
.tl-step.on .tl-card { opacity: 1; transform: none; }
.tl-card h3 { margin: 12px 0 8px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.045em; }
.tl-card p { font-size: 16px; line-height: 1.72; color: var(--sub); }
.when { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--sky); background: rgba(91,140,255,.12); border: 1px solid rgba(91,140,255,.25); }
.when.free { color: var(--mint); background: rgba(53,208,165,.12); border-color: rgba(53,208,165,.28); }

/* ---------- 06 가격 ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 72px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 38px 32px 32px; border-radius: 30px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--line); }
.plan.feat { background: linear-gradient(180deg, rgba(46,107,255,.2), rgba(46,107,255,.05)); border-color: transparent; }
.plan .ring { position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ang), rgba(91,140,255,.15) 0%, rgba(91,140,255,.15) 50%, #8fb6ff 66%, #35d0a5 76%, rgba(91,140,255,.15) 88%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 5s linear infinite; }
@keyframes spin { to { --ang: 360deg; } }
.flag { position: absolute; top: 20px; right: 20px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #04121a; background: var(--grad); }
.p-name { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.p-for { margin-top: 6px; min-height: 48px; font-size: 14.5px; color: var(--sub); }
.p-won { margin: 26px 0 4px; font-size: clamp(22px, 1.9vw, 30px); font-weight: 800; letter-spacing: -.04em; line-height: 1.15; white-space: nowrap; }
.p-won span { font-family: var(--f-en); font-weight: 700; letter-spacing: -.03em; }
.p-won i { font-style: normal; margin: 0 2px; color: var(--faint); }
.p-won small { margin-left: 4px; font-size: 17px; color: var(--sub); }
.p-dur { font-size: 14px; font-weight: 600; color: var(--faint); }
.plan ul { display: grid; gap: 12px; margin: 26px 0 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.plan li { position: relative; padding-left: 28px; font-size: 15.5px; color: #d7ddee; }
.plan li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: rgba(53,208,165,.16) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335d0a5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 10px no-repeat; }
.plan .btn { margin-top: auto; width: 100%; }
.price-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.price-notes p { padding: 24px 28px; border-radius: 22px; font-size: 15px; color: var(--sub); background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.price-notes b { display: block; margin-bottom: 4px; font-size: 16px; color: #fff; }

/* ---------- 07 질문 ---------- */
.faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }
.faq .sec-head { position: sticky; top: 130px; }
.qas { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 0; text-align: left; font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; letter-spacing: -.025em; transition: color .3s; }
.qa button:hover { color: var(--sky); }
.pm { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); transition: background .4s, border-color .4s, transform .6s var(--ease); }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; border-radius: 2px; background: #fff; transition: transform .5s var(--ease); }
.pm::after { transform: rotate(90deg); }
.qa.open .pm { background: var(--blue); border-color: var(--blue); transform: rotate(180deg); }
.qa.open .pm::after { transform: rotate(0deg); }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.qa.open .qa-a { grid-template-rows: 1fr; }
.qa-a > div { overflow: hidden; }
.qa-a p { padding: 0 60px 28px 0; font-size: 16.5px; line-height: 1.8; color: var(--sub); }

/* ---------- 08 상담 신청 ---------- */
.contact { overflow: hidden; }
.contact-aura { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(40% 50% at 12% 70%, rgba(46,107,255,.26), transparent 70%),
  radial-gradient(30% 40% at 90% 20%, rgba(53,208,165,.12), transparent 70%); }
.contact-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.visit { display: grid; gap: 14px; margin-top: 40px; }
.visit li { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border-radius: 20px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.visit svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--sky); }
.visit b { display: block; font-size: 16px; }
.visit span { font-size: 14.5px; color: var(--sub); }
.form-card { position: relative; padding: 40px; border-radius: 32px; background: linear-gradient(180deg, rgba(20,28,52,.8), rgba(10,15,30,.8)); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 50px 100px -40px rgba(0,0,0,.9); isolation: isolate; }
.form-card h3 { font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
.hint { margin: 4px 0 26px; font-size: 14.5px; color: var(--sub); }
.hint i, .fld i, .agree i { font-style: normal; color: var(--sky); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: block; margin-bottom: 22px; }
.fld > span { display: block; margin-bottom: 9px; font-size: 14.5px; font-weight: 700; }
.fld input, .fld textarea { width: 100%; height: 54px; padding: 0 16px; border-radius: 14px; font-size: 16px; color: #fff; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); transition: border-color .3s, box-shadow .3s, background .3s; }
.fld textarea { height: 118px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: #66708c; }
.fld input:focus, .fld textarea:focus { outline: 0; border-color: var(--blue-2); background: rgba(46,107,255,.08); box-shadow: 0 0 0 4px rgba(46,107,255,.18); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts input { position: absolute; opacity: 0; pointer-events: none; }
.opts label { height: 42px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: #cfd6ea; cursor: pointer; user-select: none; background: rgba(255,255,255,.035); border: 1px solid var(--line-2); transition: all .25s; }
.opts label:hover { border-color: rgba(255,255,255,.3); }
.opts input:checked + label { color: #fff; background: rgba(46,107,255,.22); border-color: var(--blue-2); box-shadow: 0 0 20px -6px rgba(46,107,255,.8); }
.opts input:focus-visible + label { outline: 2px solid var(--sky); outline-offset: 2px; }
.agree { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; font-size: 14.5px; color: #cfd6ea; cursor: pointer; }
.agree input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--blue); }
.pv { margin: 6px 0 24px 29px; font-size: 13px; color: var(--faint); }
.pv summary { cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.pv summary::-webkit-details-marker { display: none; }
.pv div { margin-top: 8px; padding: 12px 14px; border-radius: 12px; line-height: 1.75; background: rgba(255,255,255,.04); }
.send { width: 100%; height: 60px; font-size: 17px; }
.msg { min-height: 22px; margin-top: 12px; font-size: 14.5px; font-weight: 600; }
.msg.err { color: #ff8a98; }
.form-card .msg { max-width: none; padding: 0; opacity: 1; transform: none; }  /* 채팅 그림의 .msg 와 이름이 같아 안내 글이 안 보이던 것 */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done { display: none; padding: 60px 10px; text-align: center; }
.done h3 { margin: 22px 0 10px; }
.done p { color: var(--sub); }
.ok svg { width: 84px; height: 84px; margin: 0 auto; }
.ok circle { fill: none; stroke: var(--mint); stroke-width: 2.5; stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 1s var(--ease) forwards; }
.ok path { fill: none; stroke: var(--mint); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .7s var(--ease) .6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; }

/* ---------- 바닥글 ---------- */
.foot { position: relative; padding: 130px 0 40px; border-top: 1px solid var(--line); background: radial-gradient(60% 70% at 50% 100%, rgba(46,107,255,.16), transparent 70%), var(--bg); overflow: hidden; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.foot-cta { font-size: clamp(28px, 3.3vw, 50px); font-weight: 800; letter-spacing: -.05em; line-height: 1.12; }
.foot-mark { margin: 70px 0 40px; text-align: center; font-family: var(--f-en); font-weight: 800; font-size: clamp(44px, 12.6vw, 200px); line-height: .9; letter-spacing: -.04em; white-space: nowrap; user-select: none; color: transparent; -webkit-text-stroke: 1px rgba(143,182,255,.3); background: var(--grad); -webkit-background-clip: text; background-clip: text; background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 2s var(--ease); }
.foot-mark.in { background-size: 100% 100%; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); font-size: 14px; color: var(--faint); }
.foot-bottom nav { display: flex; gap: 22px; }
.foot-bottom a:hover { color: #fff; }

/* 휴대폰 아래쪽 상담 버튼 */
.mcta { display: none; }

/* ---------- 반응형 ---------- */
@media (max-width: 1180px) {
  .nav .nl { display: none; }
  .nav .nl:nth-child(1), .nav .nl:nth-child(3) { display: inline; }
}
@media (max-width: 1080px) {
  .demo-grid, .contact-grid, .faq-grid { grid-template-columns: 1fr; }
  .faq .sec-head { position: static; }
  .demo-stage { height: 720px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .t-admin, .t-ai { grid-column: span 2; }
  .t-auto { grid-column: auto; }
  .pcard { grid-template-columns: auto 1fr; }
  .pc-viz { grid-column: 1 / -1; height: 280px; }
  .plans { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .price-notes { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 899px) {
  .wrap { padding: 0 22px; }
  .sec { padding: 120px 0; }
  .nav { display: none; }
  .burger { display: block; }
  .top .wrap { height: 68px; }
  /* 첫 화면: 글은 위, 장면은 아래 */
  #hero { height: 270vh; }
  .hs { justify-content: flex-start; padding-top: 92px; }
  .hs-box { max-width: none; }
  .hero-eb { margin-bottom: 18px; font-size: 13px; }
  .hero-h1 { font-size: clamp(28px, 8.4vw, 44px); }
  .hero-p { margin-top: 16px; font-size: 15.5px; line-height: 1.65; }
  .hero-cta { margin-top: 24px; }
  .hero-cta .btn { height: 50px; padding: 0 20px; font-size: 15.5px; }
  .hs-big { font-size: clamp(100px, 30vw, 170px); }
  .hs-h { font-size: clamp(32px, 9vw, 48px); }
  .hero-steps { display: none; }
  .hero-foot { bottom: 18px; }
  .hero-fallback { right: 50%; top: auto; bottom: 4%; height: 40vh; transform: translateX(50%) rotate(-3deg); }
  .rm .hs-box, .no-gl .hs-box { height: auto; min-height: 100svh; }
  /* 만든 서비스: 옆으로 밀어서 보기 */
  .work-pin { height: auto; padding: 120px 0 90px; overflow: visible; }
  .work-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .work-meta { justify-items: start; text-align: left; }
  .work-count { display: none; }
  .work-track { padding: 0 22px 10px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .work-track::-webkit-scrollbar { display: none; }
  .case { width: 86vw; height: auto; grid-template-columns: 1fr; scroll-snap-align: center; border-radius: 26px; }
  .case-media { order: -1; height: 250px; }
  .case-lap { right: -16%; top: 26px; width: 104%; }
  .case-ph { left: 5%; bottom: -30px; width: 31%; border-radius: 22px; }
  .case-body { padding: 44px 22px 26px; gap: 12px; }
  .case-stats { gap: 18px; } .case-stats b { font-size: 24px; }
  .case-end { width: 86vw; }
  .end-in { padding: 44px 22px; }
  /* 약속 */
  .stack { margin-top: 56px; gap: 20px; }
  .pcard { top: calc(84px + var(--i) * 16px); grid-template-columns: 1fr; min-height: 0; gap: 18px; padding: 28px 22px; border-radius: 26px; }
  .pc-num { font-size: 52px; }
  .pc-viz { height: 240px; }
  .vp-ph { top: 20px; width: 124px; height: 250px; margin-left: -62px; }
  /* 만들 수 있는 것 */
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; margin-top: 50px; }
  .kb { padding: 9px 12px; font-size: 13px; }
  .kk { gap: 8px; top: 18px; }
  .t-admin, .t-ai, .t-auto { grid-column: auto; }
  .cc { left: 50%; margin-left: -130px; width: 260px; height: 160px; }
  .t-pay .toast { right: 6%; top: auto; bottom: 8%; }
  .flow { flex-wrap: wrap; align-content: center; gap: 10px; padding: 0 20px; }
  .wire { flex: 0 0 18px; min-width: 18px; margin: 0; }
  .nd { font-size: 13px; padding: 10px 12px; }
  /* 진행 방식 */
  .tl { margin-top: 60px; }
  .tl-line { left: 28px; }
  .tl-step { grid-template-columns: 56px 1fr; gap: 18px; min-height: 0; padding: 20px 0; }
  .tl-node { grid-column: 1; width: 52px; height: 52px; }
  .tl-step.l .tl-card, .tl-step.r .tl-card { grid-column: 2; justify-self: start; text-align: left; }
  /* 가격·질문·상담 */
  .plan { padding: 32px 24px 26px; }
  .qa-a p { padding-right: 10px; }
  .form-card { padding: 28px 20px; border-radius: 26px; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .foot { padding: 100px 0 110px; }
  .foot-mark { margin: 50px 0 30px; }
  .mcta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(4,6,12,.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .5s var(--ease); }
  .mcta.show { transform: none; }
  .mcta .btn { width: 100%; height: 52px; }
  .demo { padding: 120px 0 100px; }
  .demo-stage { height: 620px; }
  .demo-phone { width: 290px; height: 604px; border-radius: 48px; padding: 12px; }
  .demo-screen { border-radius: 37px; }
  .fc1 { left: -2%; top: 8%; } .fc2 { right: -4%; top: 46%; } .fc3 { left: -2%; bottom: 6%; }
  .fchip { font-size: 13px; padding: 10px 13px 10px 10px; }
  .ld-num { right: 22px; }
}
@media (max-width: 380px) {
  .hero-h1 { font-size: 28px; }
  .hero-p { font-size: 15px; }
}

/* 움직임 줄이기 */
.rm *, .rm *::before, .rm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.rm .wi, .rm [data-reveal] { transform: none !important; opacity: 1 !important; }
.rm body::after { animation: none; }
.rm .toast, .rm .kb, .rm .msg, .rm .noti, .rm .vp-toast, .rm .ct-stamp, .rm .cc { opacity: 1 !important; transform: none !important; animation: none !important; }
.rm .ct-stamp { transform: rotate(-14deg) !important; }
.rm .vp-toast { transform: translate(-50%, 0) !important; }
.rm .vp-scr i, .rm .bars i { transform: none !important; }
.rm .msg.typing { display: none; }
.rm .spark path { stroke-dashoffset: 0; }

/* 넓지만 세로로 긴 화면(태블릿 세로): 3D 장면이 아래로 가므로 글은 위로 */
@media (min-width: 900px) and (max-aspect-ratio: 21/20) {
  .hs { justify-content: flex-start; padding-top: clamp(120px, 11vh, 180px); }
  .hs-box { max-width: 760px; }
  .hero-steps { display: none; }
}

/* ---------- v3 (T-001 원고 반영) ---------- */
/* 첫 화면: 믿을 근거 세 줄 */
.hero-trust { display: grid; gap: 9px; margin-top: 34px; }
.hero-trust li { position: relative; padding-left: 28px; font-size: 15px; font-weight: 600; color: #dfe5f3; }
.hero-trust li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(53,208,165,.16) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335d0a5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 11px no-repeat; }
.hero-trust span { font-weight: 500; color: var(--sub); }
@media (min-width: 900px) and (max-height: 760px) {
  .hero-foot { display: none; }
  .hero-cta { margin-top: 26px; }
  .hero-trust { margin-top: 24px; }
}

/* 흐르는 띠: 이름 옆 작은 분류 */
.mi small { font-size: .4em; font-weight: 600; letter-spacing: -.01em; color: var(--sub); }
.mq2 .mi small { color: inherit; }

/* 01 서비스 영역 */
.t-no { margin-bottom: 8px; font-family: var(--f-en); font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--sky); }
.tile-txt ul { display: grid; gap: 5px; margin-top: 8px; }
.tile-txt li { position: relative; padding-left: 14px; font-size: 14.5px; line-height: 1.6; color: var(--sub); }
.tile-txt li::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); opacity: .75; }
.svc-note { margin-top: 28px; text-align: center; font-size: 15px; color: var(--sub); }
/* 핀테크 칸은 한 칸 너비라 카드는 가운데, 결제 알림은 아래에 */
.t-pay .cc { left: 50%; top: 12%; margin-left: -130px; width: 260px; height: 160px; }
.t-pay .toast { right: 7%; top: auto; bottom: 6%; }
.t-app .mph { height: 178px; }
/* 게임 칸: 실제 개발 화면 한 장 */
.shot { position: absolute; inset: 20px 24px 12px; border-radius: 16px; overflow: hidden; background: #0d141c; border: 1px solid var(--line); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

/* 02 포트폴리오 */
.case-top .pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.case-top .pill.hot { color: #04121a; background: var(--grad); border-color: transparent; }
.case h3 small { font-size: .4em; font-weight: 600; letter-spacing: -.02em; color: var(--sub); }
.case h3.long { font-size: clamp(28px, 2.8vw, 44px); }
.case-body { gap: 14px; }
.case-desc { max-width: 470px; font-size: 15.5px; line-height: 1.68; }
.case-specs { display: grid; gap: 7px; max-width: 470px; }
.case-specs li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: #d7ddee; }
.case-specs li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: color-mix(in srgb, var(--c) 26%, transparent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 10px no-repeat; }
.case-media.solo .case-lap { top: 13%; right: -10%; width: 116%; }
.end-note { font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; line-height: 1.55; letter-spacing: -.03em; color: #e6ebf8; }
.end-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.end-links a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 700; color: #dfe5f3; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); transition: background .3s, border-color .3s; }
.end-links a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
.end-links svg { width: 14px; height: 14px; }

.faq .h2, .contact .h2 { font-size: clamp(30px, 3.3vw, 48px); }

/* 03 원칙 01: 중간 단계를 거치던 길이 지워지고, 고객사와 개발자가 바로 이어진다 */
.vz-direct { display: grid; align-content: center; gap: 36px; padding: 26px 22px; }
.dr-row { position: relative; display: flex; align-items: center; justify-content: center; }
.dr-n { flex: none; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 700; white-space: nowrap; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); }
.dr-w { position: relative; flex: 1; max-width: 90px; min-width: 16px; height: 2px; margin: 0 8px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 5px, transparent 5px 10px); }
.dr-old { opacity: .55; transition: opacity 1s .9s; }
.dr-old .dr-n { color: var(--faint); }
.dr-old::after { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: #ff5a6e; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .3s; }
.on .dr-old { opacity: .5; }
.on .dr-old::after { transform: scaleX(1); }
.dr-new .dr-n { padding: 13px 18px; font-size: 15px; }
.dr-new .dr-n.me { background: rgba(255,255,255,.08); }
.dr-new .dr-n.dev { background: rgba(46,107,255,.22); border-color: rgba(91,140,255,.65); box-shadow: 0 0 28px -6px rgba(46,107,255,.85); }
.dr-new .dr-w { max-width: 150px; height: 3px; background: linear-gradient(90deg, #8fb6ff, #35d0a5); box-shadow: 0 0 14px rgba(91,140,255,.55); }
.dr-new .dr-w::before, .dr-new .dr-w::after { content: ""; position: absolute; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; opacity: 0; }
.on .dr-new .dr-w::before { animation: drgo 2.2s var(--ease) infinite; }
.on .dr-new .dr-w::after { animation: drback 2.2s var(--ease) 1.1s infinite; }
@keyframes drgo { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 70% { left: calc(100% - 9px); opacity: 1; } 80%, 100% { left: calc(100% - 9px); opacity: 0; } }
@keyframes drback { 0% { left: calc(100% - 9px); opacity: 0; } 12% { opacity: 1; } 70% { left: 0; opacity: 1; } 80%, 100% { left: 0; opacity: 0; } }

/* 03 원칙 04: 동탄 사무실 위치에 핀이 꽂히고, 지원사업 서류에 차례로 체크 */
.of-map { position: absolute; left: 20px; top: 20px; bottom: 20px; width: 55%; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background-color: #0a1226; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 22px 22px; }
.of-road { position: absolute; display: block; border-radius: 4px; background: rgba(143,182,255,.2); }
.of-road.r1 { left: -10%; right: -10%; top: 56%; height: 7px; transform: rotate(-8deg); }
.of-road.r2 { top: -10%; bottom: -10%; left: 44%; width: 7px; transform: rotate(12deg); }
.of-road.r3 { left: -10%; right: -10%; top: 24%; height: 4px; transform: rotate(18deg); background: rgba(53,208,165,.16); }
.of-map::after { content: ""; position: absolute; left: 46%; top: 50%; width: 40px; height: 16px; margin: -8px 0 0 -20px; border-radius: 50%; border: 2px solid rgba(91,140,255,.7); opacity: 0; }
.on .of-map::after { animation: ofping 2s var(--ease) 1s infinite; }
@keyframes ofping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.of-pin { position: absolute; left: 46%; top: 50%; width: 26px; height: 26px; margin: -34px 0 0 -13px; border-radius: 50% 50% 50% 0; background: var(--blue); box-shadow: 0 0 24px rgba(46,107,255,.9); opacity: 0; transform: rotate(-45deg) translate(14px, -14px); transition: transform .8s var(--ease) .2s, opacity .5s .2s; }
.of-pin::after { content: ""; position: absolute; left: 8px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.on .of-pin { opacity: 1; transform: rotate(-45deg); }
.of-tag { position: absolute; left: 46%; top: 50%; padding: 6px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 800; white-space: nowrap; color: #10172b; background: rgba(255,255,255,.95); box-shadow: 0 14px 30px -12px rgba(0,0,0,.7); transform: translate(-50%, 14px); }
.of-docs { position: absolute; right: 20px; top: 50%; width: calc(45% - 52px); display: grid; gap: 10px; transform: translateY(-50%); }
.of-docs li { display: flex; align-items: center; gap: 9px; padding: 12px; border-radius: 14px; font-size: 13.5px; font-weight: 700; white-space: nowrap; background: rgba(255,255,255,.04); border: 1px solid var(--line); opacity: .35; transform: translateX(14px); transition: opacity .6s, transform .8s var(--ease), border-color .6s; }
.of-docs li i { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 12px; color: #fff; background: var(--mint); transform: scale(0); transition: transform .6s var(--ease); }
.on .of-docs li { opacity: 1; transform: none; border-color: rgba(53,208,165,.3); }
.on .of-docs li i { transform: scale(1); }
.on .of-docs li:nth-child(2), .on .of-docs li:nth-child(2) i { transition-delay: .35s; }
.on .of-docs li:nth-child(3), .on .of-docs li:nth-child(3) i { transition-delay: .7s; }

/* 05 견적 원칙: 카드마다 작은 그림 */
.pr-viz { position: relative; height: 132px; margin-bottom: 28px; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.plan.feat .pr-viz { background: rgba(4,8,20,.35); border-color: rgba(143,182,255,.2); }
.pr-no { font-family: var(--f-en); font-size: 12.5px; font-weight: 500; letter-spacing: .12em; color: var(--sky); }
.plan .p-name { margin-top: 8px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.4; }
.p-desc { margin-top: 12px; font-size: 15.5px; line-height: 1.75; color: var(--sub); }
.plan .pr-viz ul { margin: 0; padding-top: 0; border-top: 0; }
.plan .pr-viz li { padding-left: 0; font-size: 12.5px; color: var(--sub); }
.plan .pr-viz li::before { display: none; }
.pv-quote ul { height: 100%; display: grid; align-content: center; gap: 11px; padding: 0 22px; }
.pv-quote li { display: flex; align-items: center; gap: 12px; }
.pv-quote li span { flex: none; width: 70px; }
.pv-quote li i { position: relative; flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.pv-quote li i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #5b8cff, #35d0a5); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
.pv-quote.on li i::after { transform: scaleX(1); }
.pv-quote.on li:nth-child(2) i::after { transition-delay: .15s; } .pv-quote.on li:nth-child(3) i::after { transition-delay: .3s; } .pv-quote.on li:nth-child(4) i::after { transition-delay: .45s; }
.pv-zero { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pv-zero small { font-size: 15px; font-weight: 700; color: var(--sub); }
.pv-zero b { font-size: 80px; font-weight: 800; line-height: 1; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pv-zero span { font-size: 24px; font-weight: 800; }
.pv-split { display: grid; align-content: center; gap: 14px; padding: 0 22px; }
.sp-bar { display: flex; gap: 4px; height: 12px; }
.sp-bar i { flex: 0 0 calc(var(--w) - 3px); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.sp-bar i:nth-child(1), .sp-leg li:nth-child(1) i { background: #5b8cff; }
.sp-bar i:nth-child(2), .sp-leg li:nth-child(2) i { background: #8fb6ff; }
.sp-bar i:nth-child(3), .sp-leg li:nth-child(3) i { background: #35d0a5; }
.pv-split.on .sp-bar i { transform: scaleX(1); }
.pv-split.on .sp-bar i:nth-child(2) { transition-delay: .35s; } .pv-split.on .sp-bar i:nth-child(3) { transition-delay: .7s; }
.plan .sp-leg { display: grid; gap: 5px; }
.sp-leg li { display: flex; align-items: center; gap: 8px; }
.sp-leg li i { width: 8px; height: 8px; flex: none; border-radius: 2px; }
.sp-leg li b { margin-left: auto; font-family: var(--f-en); font-size: 12px; font-weight: 600; color: #fff; }

/* 움직임을 줄였으면 그림은 끝난 모습으로 */
.rm .of-pin, .rm .of-docs li, .rm .dr-old::after { opacity: 1; transform: none; }
.rm .of-pin { transform: rotate(-45deg) !important; }
.rm .pv-quote li i::after, .rm .sp-bar i { transform: none !important; }

/* 세로 화면(휴대폰·태블릿 세로)에서 3D 를 못 쓰면: 글 다음에 휴대폰 그림 */
@media (max-width: 899px), (max-aspect-ratio: 21/20) {
  .no-gl .hero-stick { display: flex; flex-direction: column; }
  .no-gl .hero-copy { position: relative; inset: auto; }
  .no-gl .hero-copy .wrap, .no-gl .hs-box { height: auto; min-height: 0; }
  .no-gl .hs { position: relative; inset: auto; }
  .no-gl .hero-fallback { position: relative; order: 2; right: auto; top: auto; bottom: auto; height: min(60vh, 540px); margin: 40px auto 80px; transform: rotate(-3deg); }
  .hero-foot { display: none; }
}

@media (max-width: 1080px) {
  .t-auto .flow { flex-wrap: wrap; align-content: center; gap: 10px; padding: 0 20px; }
  .t-auto .wire { flex: 0 0 18px; min-width: 18px; margin: 0; }
  .t-auto .nd { font-size: 13px; padding: 10px 12px; }
}
@media (max-width: 899px) {
  br.d { display: none; }
  .hero-eb { line-height: 1.5; }
  .hero-cta { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 440px; }
  .hero-trust { margin-top: 22px; gap: 7px; }
  .hero-trust li { padding-left: 26px; font-size: 13.5px; }
  .hero-trust li::before { top: 2px; width: 17px; height: 17px; }
  .bento .viz { flex: none; height: 250px; }
  .svc-note { text-align: left; font-size: 14px; }
  .case h3.long { font-size: 30px; }
  .case-specs li { font-size: 14px; }
  .dr-n { padding: 8px 10px; font-size: 12px; }
  .dr-new .dr-n { padding: 11px 14px; font-size: 13.5px; }
  .dr-w { margin: 0 5px; }
  .of-map { left: 12px; top: 14px; bottom: 14px; width: 50%; }
  .of-docs { right: 12px; width: 44%; gap: 7px; }
  .of-docs li { gap: 6px; padding: 9px; font-size: 12px; }
  .of-docs li i { width: 18px; height: 18px; font-size: 10px; }
  .of-tag { padding: 5px 8px; font-size: 11px; }
  .pr-viz { height: 120px; }
}

/* 01 체험 휴대폰: 시작 전에는 덮개가 클릭을 받는다.
   휴대폰이 마우스를 따라 기울면(3D) 브라우저가 클릭을 덮개 대신 뒤쪽 iframe 으로 보내던 문제를 막는다. */
.demo-screen iframe { pointer-events: none; }
.live-on .demo-screen iframe { pointer-events: auto; }
.lenis.lenis-scrolling .demo-screen iframe { pointer-events: none; }
.has-cursor .live-on .demo-screen { cursor: default; }
.cur-off .cur-dot, .cur-off .cur-ring { opacity: 0; }
.fchip { pointer-events: none; transition: opacity .5s; }
.demo.playing .fchip { opacity: 0; }   /* 체험을 시작하면 장식 칩이 화면을 가리지 않게 */
@media (max-width: 899px) {
  .demo-phone { width: min(290px, calc(100vw - 44px)); height: auto; aspect-ratio: 290 / 604; }
}

/* 메뉴 이름이 길어진 원고 v3: 1181~1320px 에서는 메뉴 간격과 글자를 조금 줄인다 */
@media (min-width: 1181px) and (max-width: 1320px) { .nav { gap: 18px; } .nl { font-size: 14px; } }
/* 라이브 데모 제목이 길어져(원고 v3) "입니다."만 한 줄로 떨어지지 않게: 글 칸을 넓히고 제목을 조금 줄인다 */
.demo-grid { grid-template-columns: 1.15fr .85fr; }
.demo .h2 { font-size: clamp(30px, 3.4vw, 50px); }
@media (max-width: 1080px) { .demo-grid { grid-template-columns: 1fr; } }

/* 이름 EGODA (2026-09-24) — 머리글 이름은 영문 글꼴, 인사 화면 글자 5개 */
.logo .nm { font-family: var(--f-en); font-size: 17px; font-weight: 800; letter-spacing: .02em; }
.ld-word i:nth-child(5) { animation-delay: .21s; }
@media (max-width: 440px) { .logo .en { display: none; } }

/* 프로젝트 04 게임 화면 3장을 번갈아 보여 준다 (2026-09-24, game-mvp 한국어 출시판 스크린샷) */
.case-lap .slides { position: relative; border-radius: 7px; overflow: hidden; }
.case-lap .slides img { display: block; aspect-ratio: 16/9; object-position: center; border-radius: 0; background: #000; }
.case-lap .slides img + img { position: absolute; inset: 0; height: 100%; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .case-lap .slides img:nth-child(2) { animation: gs2 12s infinite; }
  .case-lap .slides img:nth-child(3) { animation: gs3 12s infinite; }
}
@keyframes gs2 { 0%, 30% { opacity: 0; } 36.7%, 70% { opacity: 1; } 70.1%, 100% { opacity: 0; } }
@keyframes gs3 { 0%, 63.3% { opacity: 0; } 70%, 93.3% { opacity: 1; } 100% { opacity: 0; } }