.hero { padding-bottom:92px; overflow:clip; }
.hero-intro { padding-top:86px; }
.hero h1 { font-size:54px; font-weight:450; line-height:1.3; letter-spacing:-1.3px; margin-top:24px; }
.hero h1 strong { font-weight:580; }
.hero-description { max-width:740px; margin-top:22px; font-size:17px; }
.hero-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:11px; margin-top:28px; }
.hero-actions .hero-action { margin:0; }
.motion-ready .hero-actions { animation-delay:.34s; }
.motion-ready .channel-scope-note { animation-delay:.42s; }
.hero-free { background:#fff; border-color:#dbe3ef; color:#425370; }
.hero-free:hover { background:#f7f9fc; }
.channel-scope-note { font-size:11px; color:#93a0b3; margin-top:16px; }
.hero-product-wrap { max-width:1180px; margin-top:67px; position:relative; }
.hero-window { position:relative; z-index:2; background:#f4f7ff; border-color:#dce5f6; box-shadow:0 18px 70px #4966a416,0 2px 8px #2b46790a; }
.hero-stage-light { position:absolute; z-index:0; left:-10%; right:-10%; top:-85px; bottom:-70px; pointer-events:none; background:radial-gradient(ellipse at 50% 58%,#e0eaffb3,transparent 68%),repeating-linear-gradient(90deg,#7395ff0d 0 1px,transparent 1px 6px); mask-image:radial-gradient(ellipse at center,#000 30%,transparent 72%); }
.channel-field { position:absolute; z-index:0; inset:0; max-width:1700px; margin:auto; overflow:clip; pointer-events:none; }
.channel-nodes,.channel-links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.channel-links path { fill:none; stroke:#dbe5f5; stroke-width:1; opacity:.7; }
.channel-node { position:absolute; display:block; width:66px; height:84px; left:0; top:0; offset-rotate:0deg; --channel-face-center:32px; offset-anchor:50% var(--channel-face-center); scale:1; z-index:1; }
.channel-tile { display:flex; flex-direction:column; align-items:center; gap:7px; transform-origin:50% var(--channel-face-center); }
.channel-face { width:64px; height:64px; display:grid; place-items:center; background:#ffffffed; border:1px solid #e5eaf3; border-radius:18px; box-shadow:0 8px 25px #243d6a0b; }
.channel-face img { width:41px; height:41px; object-fit:contain; }
.channel-kakao .channel-face img { width:44px; height:44px; border-radius:11px; }
.channel-sms .channel-face { color:#5c7cef; }
.channel-phone .channel-face { color:#5797a8; }
.channel-face svg { width:34px; height:34px; }
.channel-tile small { font-size:11px; color:#8795ac; white-space:nowrap; line-height:1.2; }
.channel-slack { left:8%; top:130px; }
.channel-kakao { left:89%; top:150px; }
.channel-excel { left:18%; top:330px; }
.channel-sms { left:80%; top:325px; }
.channel-phone { left:28%; top:70px; }
.channel-hub { position:absolute; z-index:4; left:50%; top:-32px; width:64px; height:64px; transform:translateX(-50%); border:6px solid white; border-radius:20px; box-shadow:0 6px 24px #2f64ff1a; background:#fff; }
.channel-hub img { display:block; width:52px; height:52px; border-radius:13px; }
.channel-hub:after { content:''; position:absolute; inset:-9px; border:1px solid #94b4ff66; border-radius:25px; opacity:0; }
.motion-paused .channel-node,.motion-paused .channel-face,.motion-paused .channel-hub:after { animation-play-state:paused!important; }
.motion-paused .channel-node { offset-distance:0%!important; opacity:1!important; scale:1!important; }
.motion-paused .channel-hub img,.motion-paused .channel-tile { transform:none!important; }
@media(max-width:1100px) { .hero h1 { font-size:48px; } .channel-face { width:56px; height:56px; border-radius:16px; } .channel-node { width:58px; height:77px; --channel-face-center:28px; } .channel-face img { width:36px; height:36px; } .channel-kakao .channel-face img { width:40px; height:40px; } }
@media(max-width:820px) { .hero-intro { padding-top:70px; } .hero h1 { font-size:42px; } .hero-product-wrap { margin-top:122px; } .channel-node { height:66px; --channel-face-center:24px; } .channel-face { width:48px; height:48px; border-radius:14px; } .channel-face img,.channel-kakao .channel-face img { width:32px; height:32px; border-radius:8px; } .channel-face svg { width:27px; height:27px; } .channel-tile { gap:5px; } .channel-tile small { font-size:10px; } }
@media(max-width:600px) { .hero { padding-bottom:58px; } .hero-intro { padding-top:48px; } .hero h1 { font-size:clamp(26px,7vw,32px); letter-spacing:-.8px; margin-top:22px; line-height:1.4; } .hero-description { font-size:14px; max-width:350px; margin-top:20px; } .hero-actions { gap:9px; margin-top:25px; } .hero-actions .button { min-height:46px; font-size:12px; padding:11px 14px; } .channel-scope-note { font-size:10px; margin-top:14px; } .channel-node { width:44px; height:59px; --channel-face-center:21.5px; } .channel-face { width:43px; height:43px; border-radius:13px; } .channel-face img,.channel-kakao .channel-face img { width:29px; height:29px; } .channel-face svg { width:25px; height:25px; } .channel-hub { width:54px; height:54px; top:-27px; border-width:5px; border-radius:17px; } .channel-hub img { width:44px; height:44px; border-radius:11px; } .hero-stage-light { left:-4%; right:-4%; top:-65px; bottom:-45px; } }
@media(prefers-reduced-motion:reduce) {
  html:not([data-motion-opt-in]) .channel-node,html:not([data-motion-opt-in]) .channel-face,html:not([data-motion-opt-in]) .channel-hub:after { animation:none!important; }
  html:not([data-motion-opt-in]) .channel-node { offset-distance:0%!important; opacity:1!important; scale:1!important; }
  html:not([data-motion-opt-in]) .channel-tile { transform:none; }
}