:root{--lime:#d4ff57;--bg:#111310;--muted:#a1a59b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:#f5f6ef;font-family:Manrope,'Noto Sans KR',sans-serif}
button,a,input{font:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
header{height:94px;max-width:1392px;margin:auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff16}
.logo{font-weight:800;letter-spacing:-1.6px;font-size:26px;display:flex;gap:10px;align-items:center}
.mark{width:32px;height:27px;background:var(--lime);border-radius:6px 6px 15px 15px;position:relative}
.mark:before{content:'••';color:#111;font-size:25px;letter-spacing:5px;position:absolute;left:5px;top:-8px}
nav{display:flex;gap:32px;font-size:13px;color:#c9ccc3}
.outline,.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:15px 22px;border-radius:7px;border:1px solid #ffffff35;background:transparent;color:white;font-weight:700;font-size:13px}
.primary{background:var(--lime);color:#14180c;border-color:var(--lime)}
.secondary{background:#242720}
.top-btn{font-size:12px;padding:11px 16px}
.wrap{max-width:1392px;margin:auto;padding:0 48px}
.hero{padding-top:68px;display:grid;grid-template-columns:0.94fr 1.16fr;gap:46px;align-items:center}
.eyebrow{font-size:10px;letter-spacing:2px;color:var(--lime);display:flex;align-items:center;gap:9px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--lime);display:inline-block}
.hero h1{font-size:clamp(38px,4.4vw,66px);line-height:1.23;letter-spacing:-3.5px;margin:27px 0 22px;font-weight:800}
.hero h1 span{color:var(--lime)}
.desc{font-size:14px;color:var(--muted);line-height:1.95;letter-spacing:-.3px}
.actions{display:flex;gap:10px;margin-top:29px}
.small-note{font-size:10px;color:#7f8578;margin-top:17px}
.studio{border:1px solid #42483a;border-radius:14px;background:#20251c;box-shadow:0 24px 80px #0004;overflow:hidden;transform:rotate(-1deg)}
.studio-top{height:41px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#aab29f;background:#1b1e18}
.live{color:var(--lime);letter-spacing:1px}
.stage{height:345px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#4c5640 0%,#252d20 50%,#191f17 100%)}
.grid{position:absolute;inset:0;background-image:linear-gradient(#c9eea009 1px,transparent 1px),linear-gradient(90deg,#c9eea009 1px,transparent 1px);background-size:35px 35px;mask-image:linear-gradient(black,transparent)}
.halo{width:272px;height:272px;border:1px solid #bded7440;border-radius:50%;position:absolute;left:50%;top:48%;transform:translate(-50%,-50%)}
.halo:after{content:'';position:absolute;inset:-24px;border:1px dashed #bded7420;border-radius:50%}
.avatar{width:300px;position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);filter:drop-shadow(0 22px 20px #0008);animation:float 5s ease-in-out infinite}
.avatar svg{width:100%;overflow:visible}
.stage-label{position:absolute;left:19px;top:18px;font-size:9px;color:#cbd7bf}
.corner{position:absolute;right:19px;top:18px;color:#9fae92;font-size:9px}
.face-tag{position:absolute;right:16px;bottom:60px;font-size:9px;color:var(--lime);border:1px solid #d4ff5735;padding:7px 10px;background:#1b241bc9;border-radius:4px}
.stage-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:linear-gradient(transparent,#121810d9);font-size:10px}
.stage-bottom b{font-size:12px}
.studio-foot{padding:14px;display:flex;gap:9px;align-items:center;background:#1b1e18}
.filter{border:1px solid #ffffff1b;border-radius:7px;background:#2d3228;color:#dce6d1;padding:9px 12px;font-size:11px;flex:1}
.filter.active{border-color:var(--lime);color:var(--lime);background:#d4ff5710}
.compatible{display:flex;align-items:center;justify-content:space-between;padding:46px 0 35px;margin-top:19px;border-bottom:1px solid #ffffff19;color:#93998b;font-size:11px}
.platforms{display:flex;gap:37px;color:#c8cec1;font-weight:700;font-size:17px;align-items:center}
.section{padding:72px 0;border-bottom:1px solid #ffffff19}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:33px}
h2{font-size:35px;letter-spacing:-1.8px;margin:12px 0 0;line-height:1.4}
.section-head p{font-size:12px;color:var(--muted);line-height:1.9}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}
.feature{border-top:1px solid #4b5143;padding-top:22px}
.num{color:var(--lime);font-size:11px}
.feature h3{font-size:18px;margin:18px 0 10px;letter-spacing:-.5px}
.feature p{font-size:12px;line-height:1.9;color:var(--muted)}
.sdk{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}
.chips{display:flex;gap:7px;margin:24px 0}
.chips span{font-size:10px;padding:7px 11px;border:1px solid #3b4135;border-radius:5px;color:#b9c3ae}
.codebox{border:1px solid #3a4232;background:#191d16;border-radius:10px;overflow:hidden}
.codehead{display:flex;justify-content:space-between;padding:15px 19px;border-bottom:1px solid #343b2d;font-size:10px;color:#99a78a}
.codehead button{color:#cad6bd;background:none;border:0;font-size:10px}
pre{margin:0;padding:26px 22px;font-size:12px;line-height:2;color:#ced8c4;overflow:auto}
.green{color:var(--lime)}
.purple{color:#c2a4fa}
.code-note{padding:12px 20px;border-top:1px solid #343b2d;font-size:10px;color:#8c9880}
.cta{padding:61px 0;display:flex;align-items:center;justify-content:space-between}
.cta h2{font-size:32px}
.cta p{font-size:12px;color:var(--muted)}
footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff19;padding:26px 0 35px;color:#747d6b;font-size:10px}
footer .logo{font-size:17px;color:#d0d8c8}
.modal{position:fixed;inset:0;z-index:5;display:none;align-items:center;justify-content:center;background:#000b;padding:20px}
.modal.open{display:flex}
.dialog{width:620px;max-height:90vh;overflow:auto;background:#1b2117;border:1px solid #5d7046;border-radius:15px;padding:28px}
.dialog h2{font-size:25px}
.close{float:right;background:transparent;color:white;border:0;font-size:24px}
.dialog p{color:var(--muted);font-size:13px;line-height:1.8}
.camera{position:relative;background:#111;height:280px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#aab69d;font-size:13px;margin:18px 0}
.camera video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camera .overlay{position:absolute;width:150px;height:130px;border-radius:50% 50% 45% 45%;background:#d4ff57dd;display:none;align-items:center;justify-content:center;font-size:54px;box-shadow:0 0 25px #d4ff5733}
.dialog a{color:var(--lime)}
@keyframes float{50%{transform:translate(-50%,-54%) rotate(3deg)}
}
@media(max-width:850px){header{padding:0 23px;height:76px}
nav{display:none}
.wrap{padding:0 23px}
.hero{grid-template-columns:1fr;padding-top:38px;gap:35px}
.hero h1{font-size:46px}
.hero .desc br{display:none}
.studio{transform:none}
.compatible{align-items:start;gap:20px;flex-direction:column}
.platforms{gap:23px;font-size:14px;flex-wrap:wrap}
.section{padding:48px 0}
.section-head{display:block}
.features{grid-template-columns:1fr;gap:18px}
.sdk{grid-template-columns:1fr;gap:25px}
.cta{align-items:start;gap:25px;flex-direction:column}
h2{font-size:29px}
footer{gap:20px;flex-wrap:wrap}
.stage{height:320px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}
}

/* ── 실제 데모 연결에 필요한 추가 스타일 ───────────────────────────── */
[hidden]{display:none!important}
.dialog{width:min(620px,100%)}
.camera{height:auto;aspect-ratio:16/9}
.camera video{position:absolute;inset:0}
.camera .cam-empty{position:relative;text-align:center;padding:0 20px;line-height:1.7}
.camera .cam-badge{position:absolute;left:12px;top:12px;font-size:10px;letter-spacing:1px;color:var(--lime);background:#111310cc;border:1px solid #d4ff5735;border-radius:4px;padding:5px 8px}
.camera .cam-badge.blocked{color:#ffb547;border-color:#ffb54755}
.camera .cam-stats{position:absolute;right:12px;top:12px;font-size:10px;color:#cfd8c4;background:#111310cc;border-radius:4px;padding:5px 8px;font-variant-numeric:tabular-nums}
.demo-masks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.demo-masks .filter{flex:0 1 auto;min-width:96px}
.demo-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#c9d2bf;cursor:pointer}
.toggle input{accent-color:var(--lime);width:15px;height:15px}
.dialog .status{font-size:12px;min-height:1.8em;margin:12px 0 0}
.dialog .status.err{color:#ff8a7a}
.dialog .fine{font-size:11px;color:#7f8578;margin:16px 0 0}
.steps{margin:16px 0 20px;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px}
.steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:13px;color:#d6decb;line-height:1.7}
.steps li:before{content:counter(s,decimal-leading-zero);color:var(--lime);font-size:11px;padding-top:2px}
.steps li small{display:block;color:var(--muted);font-size:12px}
.steps code,.dialog code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--lime)}
.dialog-actions{display:flex;gap:10px;flex-wrap:wrap}
pre .c{color:#6e805e}
@media(max-width:850px){.outline,.primary,.secondary{gap:12px;padding:14px 18px}}