:root { --bg: #0B0B0C; --bg2: #141416; --line: rgba(255,255,255,.12); --tx: #F2F2F0; --mut: rgba(242,242,240,.62); --y: #FFC700;
  --cond: 'Oswald', 'Pretendard Variable', sans-serif; --mono: 'VT323', monospace; }
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { background: var(--bg); color: var(--tx); font-family: 'Pretendard Variable', Pretendard, system-ui, sans-serif; line-height: 1.6; word-break: keep-all; -webkit-font-smoothing: antialiased }
a { color: inherit }
img { display: block; max-width: 100% }
em { font-style: normal; color: var(--y) }
.kick { font: 500 13px var(--cond); letter-spacing: .3em; color: var(--y); display: flex; align-items: center; gap: 12px }
.kick::before { content: ''; width: 36px; height: 1px; background: var(--y) }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 32px; padding: 14px clamp(16px, 4vw, 56px);
  background: linear-gradient(#0B0B0Ccc, #0B0B0C00); backdrop-filter: blur(6px) }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 15px var(--cond); letter-spacing: .14em }
.brand img { height: 30px; width: auto }
.nav nav { display: flex; gap: 26px; margin-left: auto; font: 500 13px var(--cond); letter-spacing: .2em }
.nav nav a { text-decoration: none; opacity: .8 } .nav nav a:hover { opacity: 1; color: var(--y) }
.nav-cta { text-decoration: none; background: var(--y); color: #0B0B0C; font: 700 14px var(--cond); letter-spacing: .08em; padding: 9px 16px }

/* hero — VHS tape look */
.hero { position: relative; height: min(100svh, 960px); min-height: 620px; overflow: hidden; display: flex; align-items: flex-end }
.hs { position: absolute; inset: 0; background-size: cover; background-position: var(--fx, 50%) 50%; opacity: 0; transform: scale(1.06); transition: opacity 1.4s, transform 6s linear }
.hs.on { opacity: 1; transform: scale(1) }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0B0B0Cf0 0%, #0B0B0C99 45%, #0B0B0C10 80%), linear-gradient(0deg, #0B0B0C 0%, #0B0B0C00 40%) }
.vhs { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: overlay; opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.6) 0 1px, transparent 1px 3px); animation: roll 7s linear infinite }
@keyframes roll { to { background-position: 0 120px } }
.hud { position: absolute; z-index: 3; font: 26px/1 var(--mono); letter-spacing: .06em; color: #fff; text-shadow: 0 0 6px #fff8 }
.hud.tl { top: 84px; left: clamp(16px, 4vw, 56px) } .hud.tr { top: 84px; right: clamp(16px, 4vw, 56px) }
.hud.bl { bottom: 26px; left: clamp(16px, 4vw, 56px); opacity: .7 } .hud.br { bottom: 26px; right: clamp(16px, 4vw, 56px); opacity: .7 }
.rec { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #ff2d2d; margin-right: 8px; animation: blink 1s steps(2) infinite }
@keyframes blink { 50% { opacity: 0 } }
.hero-tx { position: relative; z-index: 4; padding: 0 clamp(16px, 4vw, 56px) clamp(80px, 12vh, 130px); max-width: 860px }
.hero h1 { font-size: clamp(34px, 5.8vw, 80px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 20px }
.hero p { font-size: clamp(16px, 1.6vw, 20px); color: var(--mut) }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px }
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; border: 1px solid var(--y); background: var(--y); color: #0B0B0C;
  font: 700 15px var(--cond); letter-spacing: .08em; padding: 14px 22px }
.btn.ghost { background: transparent; color: var(--tx); border-color: rgba(255,255,255,.4) }
.btn:hover { filter: brightness(1.1) } .btn.ghost:hover { border-color: var(--y); color: var(--y) }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.stats div { padding: 34px clamp(16px, 3vw, 40px); border-right: 1px solid var(--line) } .stats div:last-child { border: 0 }
.stats b { display: block; font: 700 clamp(40px, 5vw, 64px)/1 var(--cond); color: var(--y) } .stats small { font-size: .6em }
.stats span { display: block; margin-top: 10px; font-size: 14px; color: var(--mut) }

/* sections */
.sec { padding: clamp(72px, 10vw, 130px) clamp(16px, 4vw, 56px) }
.head { margin-bottom: 44px; max-width: 900px }
.head h2, .about h2, .contact h2 { font-size: clamp(28px, 3.7vw, 48px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 14px 0 12px }
.head p { color: var(--mut); font-size: 17px } .head p a { color: var(--y) }

/* featured */
.feat { display: grid; gap: 28px }
.fc { display: grid; grid-template-columns: 1.5fr 1fr; background: var(--bg2); border: 1px solid var(--line); min-height: 440px }
.fc:nth-child(even) { grid-template-columns: 1fr 1.5fr } .fc:nth-child(even) .fc-img { order: 2 }
.fc-img { background-size: cover; min-height: 300px }
.fc-tx { padding: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 10px }
.fc-no { font: 700 54px/1 var(--cond); color: transparent; -webkit-text-stroke: 1px var(--y) }
.fc-cl { font: 500 13px var(--cond); letter-spacing: .24em; color: var(--y) }
.fc h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; line-height: 1.25 }
.fc-meta { font: 22px var(--mono); color: var(--mut) }
.fc p { color: var(--mut) } .fc .btn { align-self: flex-start; margin-top: 10px }
.conf { font-size: 12px; color: var(--mut) }
.boxbar { display: grid; gap: 4px; margin-top: 28px; padding: 24px 30px; border: 1px solid var(--y); background: rgba(255,199,0,.07); text-decoration: none }
.boxbar .k { font: 500 13px var(--cond); letter-spacing: .26em; color: var(--y) } .boxbar b { font-size: clamp(18px, 2vw, 24px) } .boxbar .s { color: var(--mut); font-size: 14px }
.boxbar:hover { background: rgba(255,199,0,.14) }

/* portfolio */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px }
.tab { background: none; border: 1px solid var(--line); color: var(--tx); font: 15px 'Pretendard Variable', sans-serif; padding: 8px 16px; cursor: pointer }
.tab.on, .tab:hover { border-color: var(--y); color: var(--y) }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px }
.pi { position: relative; text-align: left; background: var(--bg2); border: 0; color: var(--tx); cursor: pointer; padding: 0 0 14px }
.pi img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: saturate(.9); transition: filter .3s, transform .3s }
.pi:hover img { filter: saturate(1.15) brightness(1.08) }
.pi::after { content: '▶'; position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--y); color: #0B0B0C; font-size: 13px; opacity: 0; transition: opacity .3s }
.pi:hover::after { opacity: 1 }
.pi-c { display: block; margin: 12px 14px 2px; font: 500 12px var(--cond); letter-spacing: .2em; color: var(--y) }
.pi-t { display: block; margin: 0 14px; font-size: 15px; font-weight: 600; line-height: 1.4 }
.more { display: block; margin: 34px auto 0; background: none; border: 1px solid var(--line); color: var(--tx); padding: 12px 34px; font: 500 15px var(--cond); letter-spacing: .2em; cursor: pointer }
.more:hover { border-color: var(--y); color: var(--y) }

/* services */
.svgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line) }
.sv { background: var(--bg); padding: 34px } .sv-k { font: 500 13px var(--cond); letter-spacing: .26em; color: var(--y) }
.sv h3 { font-size: 22px; margin: 10px 0 8px } .sv p { color: var(--mut); font-size: 15px }
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 46px }
.process b { font: 700 34px var(--cond); color: var(--y) } .process span { display: block; font-weight: 700; margin: 4px 0 6px } .process p { color: var(--mut); font-size: 14px }

/* about */
.about { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 4vw, 64px); align-items: start }
.ab-img { aspect-ratio: 4/5; background-size: cover; background-position: center top; position: sticky; top: 90px }
.lead { color: var(--y); font-weight: 700; margin-bottom: 14px } .ab-tx > p { color: var(--mut) }
.hist { margin-top: 34px; display: grid; gap: 22px }
.hy { display: grid; grid-template-columns: 90px 1fr; gap: 16px; border-top: 1px solid var(--line); padding-top: 16px }
.hy b { font: 700 30px var(--cond); color: var(--y) } .hy ul { list-style: none; display: grid; gap: 6px; font-size: 15px }
.hy li.ai::before { content: 'AI'; font: 700 11px var(--cond); background: var(--y); color: #0B0B0C; padding: 1px 5px; margin-right: 8px }

/* clients */
.cgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px }
.cg { border: 1px solid var(--line); padding: 26px } .cg span { font: 500 13px var(--cond); letter-spacing: .24em; color: var(--y) } .cg p { margin-top: 10px; font-size: 16px; line-height: 1.9 }
.fine { margin-top: 16px; color: var(--mut); font-size: 13px }

/* contact */
.contact { padding: clamp(80px, 11vw, 140px) clamp(16px, 4vw, 56px); background: linear-gradient(180deg, var(--bg), #17140a); border-top: 1px solid var(--line); text-align: center }
.contact .kick { justify-content: center } .contact > p { color: var(--mut); max-width: 640px; margin: 0 auto }
.ct { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1100px; margin: 44px auto 26px }
.ct a { text-decoration: none; border: 1px solid var(--line); padding: 24px 16px; display: grid; gap: 6px }
.ct a:hover { border-color: var(--y) } .ct span { font: 500 12px var(--cond); letter-spacing: .24em; color: var(--y) } .ct b { font-size: clamp(17px, 1.7vw, 22px) }
address { font-style: normal; color: var(--mut); font-size: 15px }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 26px clamp(16px, 4vw, 56px); border-top: 1px solid var(--line); color: var(--mut); font-size: 13px }
.fab { display: none }

/* modal */
.modal { position: fixed; inset: 0; z-index: 100; background: #000d; display: none; place-items: center; padding: 16px }
.modal.on { display: grid } .mbox { position: relative; width: min(1200px, 100%) }
.frame { aspect-ratio: 16/9; background: #000 } .frame iframe { width: 100%; height: 100%; border: 0 }
.x { position: absolute; top: -44px; right: 0; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer }

/* mobile */
@media (max-width: 900px) and (orientation: portrait) {
  /* phones: enlarge a little and keep the face in the upper-middle, clear of the headline */
  .hs { background-size: auto 118%; background-position: var(--fx, 50%) calc(var(--fy, 40%) * 0.6) }
}
@media (max-width: 900px) {
  .nav nav { display: none } .brand span { display: none } .nav-cta { margin-left: auto; font-size: 13px; padding: 8px 12px }
  .hud { font-size: 18px } .hud.tl, .hud.tr { top: 70px } .hud.bl, .hud.br { display: none }
  .stats { grid-template-columns: repeat(2, 1fr) } .stats div:nth-child(2) { border-right: 0 } .stats div { border-bottom: 1px solid var(--line) }
  .fc, .fc:nth-child(even) { grid-template-columns: 1fr } .fc:nth-child(even) .fc-img { order: 0 } .fc-img { min-height: 220px; aspect-ratio: 16/9 }
  .svgrid { grid-template-columns: 1fr } .process { grid-template-columns: 1fr 1fr }
  .about { grid-template-columns: 1fr } .ab-img { position: static; aspect-ratio: 1 }
  .cgrid, .ct { grid-template-columns: 1fr 1fr }
  .fab { display: grid; place-items: center; position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 58px; height: 58px; border-radius: 50%;
    background: var(--y); color: #0B0B0C; font-size: 26px; text-decoration: none; box-shadow: 0 8px 24px #0008 }
}
@media (max-width: 520px) { .cgrid, .ct, .process { grid-template-columns: 1fr } .hy { grid-template-columns: 1fr; gap: 6px } }
@media (prefers-reduced-motion: reduce) { .hs, .vhs { transition: none; animation: none } }

.pi-lock { position: absolute; top: 10px; left: 10px; background: #0B0B0Ccc; border: 1px solid var(--y); color: var(--y); font: 500 11px var(--cond); letter-spacing: .14em; padding: 4px 8px }
.req-box { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; background: var(--bg2); border: 1px solid var(--line) }
.req-box h3 { font-size: clamp(22px, 3vw, 34px) } .req-box p { color: var(--mut) } .req-box .btn { min-width: 260px; justify-content: center }

.req-box input { width: min(420px, 100%); padding: 13px 14px; background: #0B0B0C; border: 1px solid var(--line); color: var(--tx); font: 16px 'Pretendard Variable', sans-serif }
.req-box input:focus { outline: none; border-color: var(--y) } .req-msg { font-size: 14px; color: var(--y) } .req-msg a { color: var(--y) }
@media (max-width: 600px) { .modal .frame:has(.req-box) { aspect-ratio: auto; min-height: 460px } }

.frame:has(.rq) { aspect-ratio: auto; background: var(--bg2); border: 1px solid var(--line) }
.rq { display: grid; grid-template-columns: 1.25fr 1fr; min-height: min(78vh, 600px) }
.rq.solo { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto }
.rq-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 8px; padding: 14px; background: #060607 }
.rq-gal figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background: #111 }
.rq-gal figure:first-child { grid-column: 1 / -1 }
.rq-gal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease }
.rq-gal figure:hover img { transform: scale(1.05) }
.rq-gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 18px 10px 7px;
  background: linear-gradient(transparent, #000c); font: 500 11px var(--cond); letter-spacing: .18em; color: #fff }
.rq-gal figcaption i { font: 15px var(--mono); font-style: normal; color: var(--y); letter-spacing: .04em }
.rq-gal figure:first-child figcaption { font-size: 12px; color: var(--y) }
.rq-form { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(24px, 3.4vw, 44px) }
.rq-form h3 { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.3; margin-top: 2px }
.rq-form p { color: var(--mut); font-size: 15px; margin-bottom: 6px } .rq-form p b { color: var(--tx) }
.rq-form label { display: grid; gap: 6px } .rq-form label span { font: 500 12px var(--cond); letter-spacing: .2em; color: var(--y) }
.rq-form input { width: 100%; height: 50px; padding: 0 14px; background: #0B0B0C; border: 1px solid var(--line); color: var(--tx); font: 16px 'Pretendard Variable', sans-serif }
.rq-form input:focus { outline: none; border-color: var(--y) }
.rq-form .btn { width: 100%; height: 52px; justify-content: center; margin-top: 4px }
.rq-form small { color: var(--mut); font-size: 12px } .rq-form .hp { display: none }
.req-msg { font-size: 14px; color: var(--y) } .req-msg a { color: var(--y) }
@media (max-width: 760px) {
  .rq { grid-template-columns: 1fr; min-height: 0; max-height: 86vh; overflow-y: auto }
  .rq-gal { padding: 10px; gap: 6px } .rq-gal figcaption { font-size: 9px; padding: 12px 6px 4px } .rq-gal figcaption i { font-size: 12px }
}

.btn svg { width: 16px; height: 16px; flex: none }

.lang { position: relative; margin-left: 4px } .nav nav + .lang { margin-left: 0 }
#langbtn, .lang-m button { display: flex; align-items: center; gap: 7px; background: #0B0B0C99; border: 1px solid var(--line); color: var(--tx); font: 500 13px var(--cond); letter-spacing: .1em; padding: 7px 10px; cursor: pointer }
.lang svg { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px #ffffff30; flex: none }
.lang-m { position: absolute; right: 0; top: calc(100% + 6px); display: none; flex-direction: column; min-width: 140px; background: #141416; border: 1px solid var(--line) }
.lang.on .lang-m { display: flex } .lang-m button { border: 0; border-bottom: 1px solid var(--line); background: none; padding: 10px 12px; font-family: 'Pretendard Variable', sans-serif; letter-spacing: 0 }
.lang-m button:hover { color: var(--y) }
@media (max-width: 900px) { .lang { margin-left: auto } .nav-cta { margin-left: 8px } #langbtn span { display: none } }

/* reviews */
.rv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 40px }
.rv-stats div { background: var(--bg); padding: 26px } .rv-stats b { display: block; font: 700 clamp(34px, 4vw, 52px)/1 var(--cond); color: var(--y) } .rv-stats small { font-size: .55em }
.rv-stats span { display: block; margin-top: 8px; color: var(--mut); font-size: 14px }
.rv-wall { columns: 3 300px; column-gap: 22px }
.rv { break-inside: avoid; margin: 0 0 22px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px #0009, 0 0 0 1px #ffffff14; transform: rotate(var(--r, 0deg)); transition: transform .35s ease, box-shadow .35s }
.rv img { width: 100%; display: block }
.rv:hover { transform: rotate(0) scale(1.03); box-shadow: 0 24px 60px #000c, 0 0 0 2px var(--y); position: relative; z-index: 2 }
.r1 { --r: -1.6deg } .r2 { --r: 1.2deg } .r3 { --r: .8deg } .r4 { --r: -1deg } .r5 { --r: 1.4deg } .r6 { --r: -1.3deg } .r7 { --r: .6deg } .r8 { --r: -.7deg }
.rv-link { display: inline-block; margin-top: 10px; color: var(--y); text-decoration: none; font-weight: 600 }
/* lab */
.lab-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px }
.lab-tabs button, .ba-pick button { background: none; border: 1px solid var(--line); color: var(--tx); padding: 10px 16px; font: 600 15px 'Pretendard Variable', sans-serif; cursor: pointer }
.lab-tabs button.on, .ba-pick button.on { border-color: var(--y); color: var(--y) }
.lab-p { display: none } .lab-p.on { display: block } .lab-note { margin-top: 14px; color: var(--mut); font-size: 14px }
.ba { position: relative; aspect-ratio: 16 / 9; overflow: hidden; max-width: 1100px; user-select: none }
.ba > img, .ba-top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.ba-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0) }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; background: var(--y); transform: translateX(-1px); pointer-events: none }
.ba-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--y); color: #0B0B0C; font: 700 12px var(--cond); padding: 10px 12px; border-radius: 30px; white-space: nowrap }
.ba i { position: absolute; top: 14px; font: 500 12px var(--cond); letter-spacing: .22em; font-style: normal; background: #0B0B0Ccc; padding: 6px 10px; color: var(--y) }
.ba-l { left: 14px } .ba-r { right: 14px }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0 }
.ba-pick { display: flex; gap: 8px; margin-top: 12px }
.bars { display: grid; gap: 34px; max-width: 980px } .bar-g h4 { font-size: 18px; margin-bottom: 12px }
.bar { display: grid; grid-template-columns: 170px 1fr 90px; align-items: center; gap: 14px; margin-bottom: 10px; color: var(--mut) }
.bar > div { height: 18px; background: #ffffff10; overflow: hidden } .bar i { display: block; height: 100%; width: 0; background: #ffffff40; transition: width 1.4s cubic-bezier(.2, .8, .2, 1) }
.bar.hi { color: var(--tx) } .bar.hi i { background: linear-gradient(90deg, #ffb300, var(--y)); transition-delay: .25s } .bar b { font: 700 20px var(--cond); color: var(--tx) } .bar.hi b { color: var(--y) }
.bars.go .bar i { width: var(--w) }
.tilt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.tilt { position: relative; aspect-ratio: 4 / 5; overflow: hidden; transition: transform .25s ease-out; box-shadow: 0 20px 50px #000a }
.tilt img { width: 100%; height: 100%; object-fit: cover } .tilt b { position: absolute; left: 16px; bottom: 14px; font: 600 14px var(--cond); letter-spacing: .2em; color: #fff; text-shadow: 0 2px 8px #000 }
.tilt::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), #ffffff40, transparent 55%); mix-blend-mode: overlay; pointer-events: none }
@media (max-width: 900px) { .rv-stats { grid-template-columns: 1fr 1fr } .tilt-grid { grid-template-columns: 1fr } .tilt { aspect-ratio: 16 / 10 } .bar { grid-template-columns: 1fr 64px } .bar > span { grid-column: 1 / -1 } }