[data-scene]{container-type:inline-size;position:relative;overflow:hidden;background:#1a2029;color:#eef2f9;aspect-ratio:600/370;border-radius:12px;isolation:isolate} [data-scene] *{box-sizing:border-box} [data-scene="web"]{background:#303a49;display:flex;align-items:end;justify-content:center} .demo-frame{width:90%;height:89%;background:#f9fafb;color:#252c35;border-radius:1.3cqw 1.3cqw 0 0;overflow:hidden;box-shadow:0 1.4cqw 4cqw #0004;font-family:Pretendard,sans-serif;font-size:1.45cqw;line-height:1.3}.demo-browser{height:8%;background:#e8ebef;display:flex;align-items:center;gap:.7cqw;padding:0 2cqw;color:#687381;font-size:1cqw}.demo-browser i{width:.75cqw;height:.75cqw;border-radius:50%;background:#b5bdc8}.demo-browser span{background:#f7f8fa;border-radius:.4cqw;margin:auto;width:40%;padding:.5cqw;text-align:center}.demo-shell{height:92%;display:flex}.demo-side{width:21%;background:#f1f3f5;padding:2.5cqw 1.6cqw;position:relative;color:#677281}.demo-logo{font-size:1.7cqw;font-weight:700;color:#202d3a;margin-bottom:3cqw}.demo-logo b{display:inline-grid;place-items:center;background:#5067a5;color:#fff;border-radius:.55cqw;width:2.6cqw;height:2.6cqw;font-size:1.7cqw}.demo-side small{font-size:.9cqw;color:#8994a3;letter-spacing:.03em}.demo-menu{padding:1cqw .8cqw;margin-top:.6cqw;border-radius:.6cqw}.demo-menu.active{background:#e0e6ef;color:#26364f;font-weight:600}.demo-side-bottom{position:absolute;bottom:2cqw;display:flex;gap:.7cqw;align-items:center;font-size:.95cqw;line-height:1.5}.avatar{width:2.8cqw;height:2.8cqw;border-radius:50%;display:inline-grid;place-items:center;background:#e0dcfa;color:#615992;font-style:normal;font-weight:600}.demo-main{width:79%;padding:1.5cqw 2.5cqw;overflow:hidden}.demo-top{display:flex;justify-content:space-between;color:#7b8795;font-size:1.05cqw;border-bottom:1px solid #e9edf0;padding-bottom:1.4cqw}.demo-top b{background:#e5e9f1;border-radius:50%;padding:.6cqw;color:#4e5d70}.demo-title{display:flex;justify-content:space-between;align-items:end;margin-top:2cqw}.demo-title small,.demo-stats small{color:#7a8795;font-size:1.1cqw}.demo-title .demo-title-heading{display:block;font-size:2.4cqw;color:#202933;margin:.5cqw 0;font-weight:650}.demo-title p,.demo-stats p,.demo-table-head p{margin:.5cqw 0 0;color:#8993a0;font-size:1.05cqw}.demo-button{background:#53699e;color:white;padding:1cqw 1.3cqw;border-radius:.5cqw;font-weight:600;font-size:1cqw}.demo-stats{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #e8ebef;margin-top:2cqw;padding:1.5cqw 0}.demo-stats>div+div{border-left:1px solid #e8ebef;padding-left:2cqw}.demo-stats strong{display:block;font-size:2.9cqw;font-weight:650;margin:.4cqw 0;color:#243044}.demo-stats strong em{font-size:1.2cqw;font-style:normal;font-weight:400}.demo-table-head{display:flex;justify-content:space-between;align-items:end;margin:2.2cqw 0 1cqw}.demo-table-head .demo-table-title{display:block;font-size:1.5cqw;color:#202933;margin:0}.demo-table-head>span{font-size:1cqw;color:#6c7b92}.demo-row{display:grid;grid-template-columns:1fr 1.2fr 1.6fr .8fr;align-items:center;gap:.8cqw;height:4.5cqw;border-top:1px solid #edf0f3;font-size:1.05cqw;color:#525f6f}.demo-row-head{height:2.7cqw;color:#94a0ad;font-size:.95cqw}.demo-row .avatar{width:2.2cqw;height:2.2cqw;margin-right:.4cqw;font-size:.9cqw}.avatar.alt{background:#dceee8;color:#43816e}.avatar.third{background:#f2e6d9;color:#9a7952}.demo-row em{font-style:normal;color:#3d8067;background:#e5f4ec;padding:.4cqw .7cqw;border-radius:.4cqw}.demo-row .wait{color:#987146;background:#f8f0e6}
[data-scene="app"]{background:#2b3545;display:flex;align-items:center;justify-content:center}.phone-area{position:relative;width:100%;height:100%;display:flex;align-items:flex-start;justify-content:center;padding-top:3cqw}.sample-phone{position:relative;background:#fafbfc;color:#253044;width:30%;height:107%;border:1cqw solid #111722;border-radius:4cqw 4cqw 0 0;overflow:hidden;box-shadow:0 2cqw 5cqw #0005;font-size:1.6cqw;line-height:1.35}.phone-island{position:absolute;left:39%;top:1cqw;width:22%;height:2.5cqw;border-radius:3cqw;background:#121821;z-index:2}.phone-status{height:6%;padding:2cqw 2.5cqw 0;display:flex;justify-content:space-between;font-size:1.5cqw}.phone-header{display:flex;justify-content:space-between;align-items:center;padding:2cqw 2.5cqw;font-size:2cqw}.phone-header strong{letter-spacing:-.03em}.phone-header span{font-size:2.8cqw}.phone-scroll{padding:1cqw 2.4cqw}.phone-scroll>small{font-size:1.25cqw;color:#798797}.phone-scroll .phone-title{display:block;font-size:2.65cqw;line-height:1.25;margin:1cqw 0 2cqw;color:#202c3a}.phone-card{padding:1.8cqw;background:#596f9c;border-radius:1.5cqw;color:white;box-shadow:0 1cqw 2cqw #465c8a22}.phone-card-top{display:flex;justify-content:space-between;font-size:1.1cqw;opacity:.85}.phone-card>strong{display:block;font-size:2.1cqw;margin:1.5cqw 0 .4cqw}.phone-card p,.phone-event p{font-size:1.2cqw;margin:0;opacity:.72}.phone-sep{border-top:1px solid #ffffff45;margin:1.6cqw 0}.phone-date{display:flex;justify-content:space-between;font-size:1.15cqw}.phone-heading{display:flex;justify-content:space-between;margin:2.5cqw 0 1cqw;font-size:1.4cqw}.phone-heading span{font-size:1cqw;color:#929dab}.phone-event{display:flex;align-items:center;gap:1cqw;padding:1.1cqw 0;border-bottom:1px solid #ecf0f4;font-size:1.25cqw}.phone-event>span{margin-left:auto;color:#a8b2be;font-size:2cqw}.date-tile{width:4cqw;height:4cqw;border-radius:.6cqw;background:#e9edf7;color:#566e9d;display:grid;place-items:center;line-height:1}.date-tile span{font-size:.85cqw}.date-tile b{font-size:1.5cqw}.date-tile.pale{background:#f1efeb;color:#817c70}.phone-note{background:#f0f3f9;color:#718095;border-radius:.8cqw;font-size:1.15cqw;line-height:1.6;margin-top:2cqw;padding:1.4cqw}.phone-nav{position:absolute;bottom:2cqw;left:0;right:0;background:#fff;display:flex;justify-content:space-around;padding:1.2cqw 0;color:#8190a3;text-align:center;font-size:1cqw}.phone-float{position:absolute;left:62%;top:22%;background:#fff;color:#25344c;display:flex;gap:1.2cqw;align-items:center;padding:1.5cqw 2cqw;border-radius:1.1cqw;box-shadow:0 1.5cqw 3cqw #0a132a3d;font-size:1.5cqw;white-space:nowrap}.phone-float p{margin:.4cqw 0 0;color:#7e8a9b;font-size:1.15cqw}.float-icon{background:#e8eefb;color:#5b72a8;border-radius:50%;width:3.6cqw;height:3.6cqw;display:grid;place-items:center;font-weight:600}
.flow-scene{width:100%;height:100%;padding:4.5cqw 5cqw 3cqw;display:flex;flex-direction:column;font-family:Pretendard,sans-serif}.flow-heading{display:flex;justify-content:space-between;align-items:center}.flow-heading small,.flow-heading strong{display:block}.flow-heading small,.flow-col-label{font-size:1.5cqw;color:#a4b1c4}.flow-heading strong{font-size:2.6cqw;font-weight:600;letter-spacing:-.025em;margin-top:.8cqw}.flow-state{font-size:1.3cqw;color:#bcc8db}.flow-state i,.flow-bottom i{display:inline-block;width:.8cqw;height:.8cqw;background:#afc2fc;border-radius:50%;margin-right:.8cqw}.flow-body{display:flex;align-items:center;flex:1;padding:2cqw 0}.flow-column{width:21%;display:flex;flex-direction:column;gap:1.1cqw}.flow-col-label{margin-bottom:.5cqw;white-space:nowrap}.flow-node{height:6.5cqw;display:flex;align-items:center;gap:1cqw;padding:1.1cqw;background:#242d3a;border:1px solid #374559;border-radius:1cqw}.flow-node i,.ai-result i{font-style:normal;display:grid;place-items:center;color:#b7c7ee;background:#36445b;border-radius:.65cqw;width:3.2cqw;height:3.2cqw;font-size:1.6cqw;flex:none}.flow-node b,.flow-node small,.ai-result b,.ai-result span{display:block;white-space:nowrap}.flow-node b,.ai-result b{font-size:1.5cqw;font-weight:600}.flow-node small,.ai-result span{font-size:1.1cqw;color:#a4b1c4;margin-top:.4cqw}.flow-connector{height:25cqw;flex:1}.flow-connector svg{width:100%;height:100%;overflow:visible;fill:none;stroke:#4d5d73;stroke-width:1.3}.flow-connector .travel{stroke:#bacbff;stroke-width:2;stroke-dasharray:8 300;stroke-dashoffset:308;animation:travel 5.6s linear infinite;animation-play-state:paused}.flow-connector .travel-two{animation-delay:1.4s}.flow-connector .travel-three{animation-delay:2.8s}.flow-center{width:25%;padding:2.5cqw 1.2cqw;text-align:center;border-radius:1.2cqw;background:#dfe6fa;color:#273958;box-shadow:0 1cqw 3cqw #0b111f4d}.center-icon{font-size:2.7cqw;color:#6177a9}.flow-center span,.flow-center strong,.flow-center small{display:block}.flow-center span{font-size:1.1cqw;color:#697e9c;margin-top:.8cqw}.flow-center strong{font-size:2.2cqw;margin:1cqw 0}.flow-center small{font-size:1.15cqw;color:#566b8a}.flow-divider{height:1px;background:#bdcce4;margin:1.6cqw 0}.flow-bottom{border-top:1px solid #344052;padding-top:2cqw;display:flex;justify-content:space-between;color:#aab8ca;font-size:1.25cqw}.flow-bottom i{width:.55cqw;height:.55cqw}.ai-pipeline{display:flex;align-items:center;flex:1;gap:0}.ai-input{width:23%;height:24cqw;background:#252e3b;border-radius:1.2cqw;padding:2cqw;display:flex;flex-direction:column;align-items:flex-start}.ai-input small,.ai-output>small,.ai-engine small{font-size:1.2cqw;color:#a7b4c8}.ai-input b{font-size:1.8cqw;margin:.5cqw 0}.ai-input>span:last-child{font-size:1.1cqw;color:#a7b4c8;margin-top:auto}.ai-icon,.ai-spark{font-size:2.2cqw;color:#becdff}.waveform{height:6cqw;display:flex;align-items:center;gap:.5cqw;margin-top:1.4cqw}.waveform i{width:.4cqw;height:35%;background:#8094c1;animation:wave 3s ease-in-out infinite;animation-play-state:paused}.waveform i:nth-child(3n){height:80%;animation-delay:-.8s}.waveform i:nth-child(4n){height:55%;animation-delay:-1.6s}.ai-track{flex:1;height:1px;background:#506078;position:relative}.ai-track i{position:absolute;width:1.2cqw;height:1.2cqw;border-radius:50%;background:#c2d0ff;top:-.55cqw;left:0;animation:progress 5.6s ease-in-out infinite;animation-play-state:paused}.ai-engine{width:28%;padding:2cqw;background:#dfe6fa;color:#273958;border-radius:1.2cqw;box-shadow:0 1cqw 3cqw #0b111f4d}.ai-engine-top{display:flex;gap:1cqw;align-items:center;margin-bottom:1.5cqw}.ai-engine-top .ai-spark{font-size:2.6cqw;color:#637bad}.ai-engine-top small,.ai-engine-top b{display:block}.ai-engine-top small{color:#697e9c}.ai-engine-top b{font-size:2cqw;margin-top:.3cqw}.ai-step{display:flex;align-items:center;gap:1cqw;padding:.8cqw 0;border-top:1px solid #bbc9e2;font-size:1.25cqw}.ai-step span{color:#7c8fae;font-size:1.1cqw}.ai-step i{margin-left:auto;width:.7cqw;height:.7cqw;border-radius:50%;background:#879abd;animation:step 5.6s ease-in-out infinite;animation-play-state:paused}.ai-step:nth-child(3) i{animation-delay:1s}.ai-step:nth-child(4) i{animation-delay:2s}.ai-output{width:26%}.ai-output>small{display:block;margin-bottom:1cqw}.ai-result{display:flex;gap:1cqw;align-items:center;padding:1.1cqw;background:#252e3b;border-radius:.8cqw;margin-bottom:.8cqw}.scene-playing .travel,.scene-playing .waveform i,.scene-playing .ai-track i,.scene-playing .ai-step i{animation-play-state:running}@keyframes travel{0%{stroke-dashoffset:308;opacity:0}15%{opacity:1}70%{stroke-dashoffset:0;opacity:1}85%,100%{opacity:0}}@keyframes progress{0%,15%{transform:translateX(0);opacity:0}25%{opacity:1}75%{transform:translateX(4cqw);opacity:1}90%,100%{opacity:0}}@keyframes step{0%,20%,90%,100%{background:#879abd}40%,70%{background:#3a609d;box-shadow:0 0 .7cqw #3a609d77}}@keyframes wave{0%,100%{transform:scaleY(.65)}50%{transform:scaleY(1)}}
.evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.evidence .cap-visual{height:auto!important;aspect-ratio:600/370;padding:0}@media(max-width:700px){.evidence-grid{grid-template-columns:1fr}.flow-heading strong{font-size:2.8cqw}}@media(prefers-reduced-motion:reduce){[data-scene] *{animation:none!important}.flow-connector .travel,.ai-track i{display:none}}
/* The production site has a 60px minimum for its own flow nodes; these are scaled preview graphics. */
[data-scene] .flow-node{min-height:0}

/* Paired mobile screens: the second screen sits higher within the same composition. */
.phone-area{align-items:flex-start;gap:4cqw;padding-top:8cqw}
.phone-area .sample-phone{width:29%;height:112%;flex:none}
.phone-area .sample-phone-detail{margin-top:-5cqw;height:112%}
.detail-header{display:grid;grid-template-columns:1fr 3fr 1fr;text-align:center}
.detail-header span{font-size:2.2cqw}
.detail-header strong{font-size:1.7cqw}
.detail-scroll>small{color:#617bad;font-weight:600}
.detail-scroll .phone-title{margin:.8cqw 0 .5cqw}
.detail-intro{color:#8794a4;font-size:1.2cqw;margin:0}
.detail-separator{border-top:1px solid #e8edf2;margin:2cqw 0}
.detail-section{padding:.7cqw 0 1.5cqw}
.detail-section span,.detail-section strong,.detail-section p{display:block;margin:0}
.detail-section span{font-size:1.1cqw;color:#8d98a7;margin-bottom:.6cqw}
.detail-section strong{font-size:1.5cqw;color:#273348}
.detail-section p{font-size:1.1cqw;color:#8794a4;margin-top:.3cqw}
.detail-map{height:9cqw;border-radius:1cqw;background:#e9edf0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:.6cqw;color:#4c638d;font-size:1cqw}
.detail-map b,.map-pin{position:relative;z-index:1}
.map-pin{color:#657db0;font-size:1.8cqw}
.map-street{position:absolute;background:#fff;opacity:.8;height:.8cqw;width:120%;transform:rotate(-16deg)}
.map-street-b{transform:rotate(28deg);top:1.5cqw}
.map-street-c{transform:rotate(75deg);width:70%}
.detail-actions{display:flex;gap:.7cqw;margin-top:1.5cqw;font-size:1.1cqw;color:#596f9c}
.detail-actions span{flex:1;border:1px solid #dbe2eb;padding:1cqw .3cqw;border-radius:.6cqw;text-align:center}

/* Keep both devices balanced around the centre and preserve the offset at rest. */
.phone-area{gap:4.5cqw;padding-top:7cqw}
.phone-area .sample-phone{width:29.5%;height:111%}
.phone-area .sample-phone-detail{margin-top:-4cqw;height:111%}

/* Coordinated sample interactions; all motion rests at a legible default. */
.demo-update{display:inline-block;vertical-align:middle;margin-left:.6cqw;padding:.4cqw .7cqw;border-radius:.5cqw;background:#e6edf9;color:#4c679a;font-size:.85cqw;font-weight:600;opacity:0;transform:translateY(.5cqw)}
.demo-row-highlight{border-radius:.5cqw}
.demo-row-highlight em,.phone-confirm,.detail-confirm,.map-pin{display:inline-block}
.demo-update,.demo-row-highlight,.demo-row-highlight em,.phone-confirm,.detail-confirm,.map-pin{animation-duration:8s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-iteration-count:infinite;animation-play-state:paused}
.demo-update{animation-name:ui-update-badge}
.demo-row-highlight{animation-name:ui-update-row}
.demo-row-highlight em{animation-name:ui-update-status}
.phone-confirm,.detail-confirm{animation-name:ui-confirm}
.detail-confirm{animation-delay:.45s}
.map-pin{animation-name:ui-pin;animation-delay:1s}
.scene-playing .demo-update,.scene-playing .demo-row-highlight,.scene-playing .demo-row-highlight em,.scene-playing .phone-confirm,.scene-playing .detail-confirm,.scene-playing .map-pin{animation-play-state:running}
@keyframes ui-update-badge{0%,8%,82%,100%{opacity:0;transform:translateY(.5cqw)}18%,68%{opacity:1;transform:translateY(0)}}
@keyframes ui-update-row{0%,10%,75%,100%{background-color:transparent}22%,55%{background-color:#edf2fb}}
@keyframes ui-update-status{0%,12%,68%,100%{transform:scale(1)}22%{transform:scale(1.08)}32%{transform:scale(1)}}
@keyframes ui-confirm{0%,16%,65%,100%{opacity:.75;transform:translateY(0)}25%,52%{opacity:1;transform:translateY(-.3cqw)}}
@keyframes ui-pin{0%,25%,65%,100%{transform:translateY(0)}37%{transform:translateY(-.65cqw)}45%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.demo-update,.demo-row-highlight,.demo-row-highlight em,.phone-confirm,.detail-confirm,.map-pin{animation:none!important}.demo-update{opacity:0}}
/* Move a track-width carrier, so the dot travels the full responsive line. */
.ai-track i{width:100%;height:1px;top:0;left:0;background:transparent;border-radius:0;transform:translateX(-100%)}
.ai-track i::after{content:"";position:absolute;right:0;top:50%;width:1.2cqw;height:1.2cqw;border-radius:50%;background:#c2d0ff;transform:translate(50%,-50%)}
@keyframes progress{0%,15%{transform:translateX(-100%);opacity:0}25%{opacity:1}75%{transform:translateX(0);opacity:1}90%,100%{transform:translateX(0);opacity:0}}

/* A single clear UI event in each example, paused whenever its scene is inactive. */
.sample-notice{position:absolute;z-index:4;right:4%;top:57%;width:42%;display:flex;align-items:center;gap:1.5cqw;background:#fff;color:#27364c;padding:1.8cqw 2cqw;border-radius:1.3cqw;box-shadow:0 1.3cqw 3cqw #0b152c42;opacity:0;transform:translateY(2cqw) scale(.97);pointer-events:none;animation:sample-notice-in 8s cubic-bezier(.22,1,.36,1) infinite;animation-play-state:paused}
[data-scene=app] .sample-notice{width:43%;right:4%;top:61%;animation-delay:.8s}
.notice-mark{width:4.8cqw;height:4.8cqw;flex:none;border-radius:50%;background:#e6edfb;color:#526fa7;display:grid;place-items:center;font-weight:700;font-size:2.5cqw}
.sample-notice strong,.sample-notice small{display:block;white-space:nowrap;line-height:1.4}
.sample-notice strong{font-size:2cqw;font-weight:650}.sample-notice small{font-size:1.35cqw;color:#718097;margin-top:.35cqw}
.scene-playing .sample-notice{animation-play-state:running}
@keyframes sample-notice-in{0%,8%{opacity:0;transform:translateY(2cqw) scale(.97)}18%,66%{opacity:1;transform:translateY(0) scale(1)}76%,100%{opacity:0;transform:translateY(-.7cqw) scale(1)}}
@media(prefers-reduced-motion:reduce){.sample-notice{display:none}}

/* Selected homepage arrangement. */
.capabilities{padding:96px 0;scroll-margin-top:100px}.cap-head{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:48px}.cap-head h2{font-size:clamp(32px,4vw,54px);letter-spacing:-.035em;line-height:1.2;font-weight:500;margin:0}.cap-link{display:inline-flex;align-items:center;gap:16px;color:#c9d3ff;font-size:14px;min-height:44px;text-underline-offset:6px;margin-top:20px}.cap-link:focus-visible{outline:2px solid #aabaff;outline-offset:5px}.evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px 32px}.evidence{display:flex;flex-direction:column;min-width:0}.evidence .cap-visual{height:auto;aspect-ratio:600/370}.evidence-copy{display:flex;flex-direction:column;flex:1;padding-top:20px}.evidence-copy h3{margin:0 0 12px;font-size:25px;font-weight:500;letter-spacing:-.03em}.evidence-copy p{max-width:42ch;font-size:16px;min-height:3.4em;color:#adb4bb;margin:0}.evidence-copy .cap-link{align-self:flex-start;margin-top:auto;padding-top:20px}.d-heading{align-items:end;border-bottom:1px solid #3e4652;padding-bottom:48px;margin-bottom:56px}.d-heading h2{font-size:18px;font-weight:500;color:#adb4bb;letter-spacing:0}.d-heading .d-statement{font-size:clamp(32px,3.4vw,52px);line-height:1.35;letter-spacing:-.035em;color:#f2f4ef;max-width:none;margin:30px 0 0;font-weight:500}.d-statement em{font-style:normal;color:#aabaff}@media(max-width:700px){.capabilities{padding:64px 0 90px}.d-heading{display:block;padding-bottom:30px;margin-bottom:36px}.d-heading .d-statement{font-size:30px;line-height:1.4;margin-top:22px}.evidence-grid{grid-template-columns:1fr;gap:48px}.evidence-copy h3{font-size:26px}.evidence-copy p{min-height:0}.evidence-copy .cap-link{margin-top:0}}

/* Improve legibility of text within the illustrated example interfaces. */
.demo-side{color:#5c6675}.demo-side small{color:#606d7d}.demo-title p,.demo-stats p,.demo-table-head p{color:#687482}.demo-table-head>span{color:#5a6a80}.demo-row-head{color:#677586}.avatar.alt{color:#28614e}.avatar.third{color:#745536}.phone-heading span,.detail-intro,.detail-section p,.detail-section span{color:#617084}.flow-center span,.ai-engine-top small{color:#526683}.flow-center small{color:#4e607b}.ai-step span{color:#586c8a}