@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root { --paper:#f3f2ee; --ink:#211b19; --muted:#77716d; --line:#d9d6d0; --coral:#f25d3d; --blue:#6079e8; --lilac:#9b82cf; --panel:#fcfcfa; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans','Noto Sans KR',sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
a:focus-visible { outline:3px solid var(--coral); outline-offset:5px; }
.site-shell { width:min(1500px,100%); min-height:100vh; margin:0 auto; padding:0 clamp(24px,5.4vw,82px); overflow:hidden; }
.site-header { height:104px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:22px; font-weight:700; letter-spacing:-1.1px; }
.wordmark svg { width:24px; height:24px; fill:var(--ink); }
.release-state { display:flex; align-items:center; gap:9px; color:#5f5a56; font-size:11px; letter-spacing:.02em; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 5px rgba(242,93,61,.12); animation:pulse 2.4s ease-in-out infinite; }
.hero { min-height:680px; display:grid; grid-template-columns:minmax(390px,.78fr) minmax(570px,1.22fr); align-items:center; gap:clamp(32px,6vw,90px); padding:68px 0 78px; }
.hero-copy { position:relative; z-index:2; }
.product-label { margin:0 0 26px; font-size:13px; font-weight:600; letter-spacing:-.1px; }
.product-label::before { content:''; display:inline-block; width:28px; height:2px; margin:0 12px 4px 0; background:var(--coral); }
h1 { margin:0 0 28px; font-size:clamp(45px,4.3vw,68px); line-height:1.2; letter-spacing:-.065em; font-weight:700; word-break:keep-all; }
.hero-description { margin:0; color:var(--muted); font-size:15px; line-height:1.9; letter-spacing:-.025em; }
.product-stage { position:relative; height:510px; perspective:1400px; }
.stage-glow { position:absolute; inset:3% -4% -8% 1%; background:radial-gradient(ellipse at center,rgba(242,93,61,.15),rgba(117,105,216,.08) 35%,transparent 70%); filter:blur(20px); }
.app-window { position:absolute; inset:28px 6px 30px 0; background:var(--panel); border:1px solid rgba(36,29,26,.14); border-radius:15px; box-shadow:0 35px 80px rgba(50,39,34,.16),0 3px 8px rgba(50,39,34,.08); overflow:hidden; transform:rotateY(-5deg) rotateX(1deg); transform-origin:center left; animation:window-in 1.1s cubic-bezier(.2,.8,.2,1) both; }
.app-topbar { height:54px; padding:0 17px; display:flex; align-items:center; border-bottom:1px solid #ebe9e5; font-size:9px; color:#756f6b; }
.mini-logo { display:grid; place-items:center; width:25px; height:25px; margin-right:9px; border-radius:7px; background:var(--ink); color:white; font-size:14px; font-weight:700; }
.workspace-name { font-weight:600; color:#403b38; }
.topbar-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.topbar-actions>span { width:13px; height:13px; border:1px solid #c9c5c0; border-radius:50%; }
.topbar-actions i { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#eae4df; font-size:8px; font-style:normal; color:#5a504a; }
.app-body { display:flex; height:calc(100% - 54px); }
.app-sidebar { width:53px; padding-top:22px; border-right:1px solid #ebe9e5; display:flex; align-items:center; flex-direction:column; gap:22px; }
.app-sidebar span { display:block; width:14px; height:14px; border:1.5px solid #b8b3ae; border-radius:4px; }
.app-sidebar .side-active { background:var(--ink); border-color:var(--ink); box-shadow:0 0 0 7px #eeece8; }
.app-main { flex:1; min-width:0; padding:28px 27px 0; }
.canvas-heading { display:flex; align-items:end; justify-content:space-between; }
.canvas-heading small,.canvas-heading strong { display:block; }
.canvas-heading small { margin-bottom:7px; color:#99928c; font-size:8px; }
.canvas-heading strong { font-size:16px; letter-spacing:-.5px; }
.audience-count { padding:7px 10px; border:1px solid #e3e0dc; border-radius:7px; font-size:8px; color:#69635f; }
.audience-count i { display:inline-block; width:5px; height:5px; background:#62a875; border-radius:50%; margin-right:4px; }
.filter-line { display:flex; align-items:center; gap:7px; margin:23px 0 15px; font-size:7px; color:#625d59; white-space:nowrap; }
.filter-line span { padding:7px 9px; background:#f0efec; border-radius:5px; }
.filter-line b { color:#aaa49e; font-size:6px; }
.journey-canvas { position:relative; height:275px; overflow:hidden; border:1px solid #ebe8e4; border-radius:8px; background:#f8f8f6; }
.canvas-grid { position:absolute; inset:0; background-image:linear-gradient(#e8e5e1 1px,transparent 1px),linear-gradient(90deg,#e8e5e1 1px,transparent 1px); background-size:18px 18px; opacity:.45; }
.flow-card { position:absolute; z-index:1; width:145px; min-height:60px; padding:12px; display:flex; align-items:center; gap:9px; background:#fff; border:1px solid #dedbd7; border-radius:8px; box-shadow:0 7px 17px rgba(48,41,38,.07); }
.flow-card small,.flow-card strong { display:block; }
.flow-card small { color:#a09a95; font-size:6px; margin-bottom:4px; }
.flow-card strong { font-size:7px; white-space:nowrap; }
.card-icon { flex:0 0 auto; display:grid; place-items:center; width:27px; height:27px; border-radius:7px; font-size:11px; }
.card-icon.coral { color:#c64c35; background:#fde4de; }
.card-icon.lilac { color:#70569f; background:#eee8f8; }
.card-icon.blue { color:#4d63c4; background:#e6eaff; }
.trigger-card { left:25px; top:34px; }
.wait-card { left:194px; top:105px; }
.message-card { right:20px; bottom:24px; }
.message-card em { position:absolute; right:7px; top:7px; padding:3px 5px; background:#e1f3e5; color:#4c865c; border-radius:3px; font-size:5px; font-style:normal; }
.connector { position:absolute; z-index:0; width:76px; height:53px; border-right:1px solid #aaa39c; border-bottom:1px solid #aaa39c; border-radius:0 0 14px 0; }
.connector::after { content:''; position:absolute; right:-3px; bottom:-3px; width:5px; height:5px; border-radius:50%; background:var(--coral); }
.connector-one { left:145px; top:63px; }
.connector-two { right:129px; bottom:73px; transform:rotate(180deg); }
.cursor-tag { position:absolute; z-index:3; top:56px; right:25px; padding:6px 8px; background:var(--coral); color:white; border-radius:4px 4px 4px 0; font-size:6px; box-shadow:0 4px 8px rgba(242,93,61,.2); }
.cursor-arrow { position:absolute; left:-6px; bottom:-7px; width:0; height:0; border-top:7px solid var(--coral); border-right:7px solid transparent; transform:rotate(-12deg); }
.scan-line { position:absolute; top:53px; left:53px; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(242,93,61,.6),transparent); opacity:0; animation:scan 4.6s 1.4s ease-in-out infinite; }
.signal-card { position:absolute; z-index:4; padding:15px 17px; border-radius:9px; background:rgba(255,255,255,.92); border:1px solid rgba(61,50,45,.12); box-shadow:0 17px 35px rgba(49,38,33,.12); backdrop-filter:blur(12px); animation:float-in 1s .7s cubic-bezier(.2,.8,.2,1) both; }
.signal-card span,.signal-card strong { display:block; }
.signal-card>span { color:#9b948e; font-size:7px; margin-bottom:7px; }
.signal-card>strong { font-size:8px; }
.signal-left { left:-33px; bottom:13px; width:196px; }
.signal-right { right:-22px; top:4px; width:130px; }
.signal-right strong i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#61a672; }
.signal-bars { display:flex; align-items:end; gap:4px; height:22px; margin-top:12px; }
.signal-bars i { flex:1; height:30%; border-radius:2px 2px 0 0; background:#dcd8d3; }
.signal-bars i:nth-child(2) { height:50%; } .signal-bars i:nth-child(3) { height:42%; } .signal-bars i:nth-child(4) { height:76%; background:#f2a18f; } .signal-bars i:nth-child(5) { height:65%; } .signal-bars i:nth-child(6) { height:95%; background:var(--coral); } .signal-bars i:nth-child(7) { height:82%; }
footer { display:flex; justify-content:space-between; padding:25px 0 30px; color:#98918b; font-size:9px; }
.footer-message { color:#6f6964; }
@keyframes pulse { 50% { box-shadow:0 0 0 8px rgba(242,93,61,0); } }
@keyframes window-in { from { opacity:0; transform:translateY(28px) rotateY(-2deg); } to { opacity:1; transform:translateY(0) rotateY(-5deg) rotateX(1deg); } }
@keyframes float-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes scan { 0%,25% { opacity:0; transform:translateY(0); } 35% { opacity:1; } 70% { opacity:.15; transform:translateY(390px); } 71%,100% { opacity:0; transform:translateY(390px); } }
@media(max-width:1050px) { .hero { grid-template-columns:.8fr 1.2fr; gap:30px; } .product-stage { transform:scale(.9); transform-origin:center right; width:111%; margin-left:-11%; } }
@media(max-width:760px) {
  .site-shell { padding:0 22px; } .site-header { height:78px; } .wordmark { font-size:19px; } .wordmark svg { width:21px; height:21px; } .release-state { font-size:8px; }
  .hero { min-height:auto; display:block; padding:62px 0 50px; } .product-label { font-size:11px; margin-bottom:21px; } .product-label::before { width:20px; }
  h1 { font-size:clamp(38px,11vw,52px); line-height:1.22; letter-spacing:-.07em; margin-bottom:23px; } .hero-description { font-size:13px; }
  .product-stage { height:390px; width:122%; margin:28px 0 0 -11%; transform:scale(.82); transform-origin:center center; } .app-window { inset:24px 5px 26px 4px; transform:none; }
  .app-sidebar { width:42px; } .app-main { padding:24px 17px 0; } .filter-line span:nth-of-type(3),.filter-line b:nth-of-type(2) { display:none; }
  .signal-left { left:-5px; } .signal-right { right:-7px; } footer { flex-wrap:wrap; gap:15px; border-top:1px solid var(--line); } .footer-message { order:3; width:100%; }
}
@media(max-width:390px) { .release-state { max-width:105px; line-height:1.35; } .product-stage { width:128%; margin-left:-14%; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; } }