/* A more expressive motion layer, with the same quiet palette. */
:root{--snap:cubic-bezier(.22,1,.36,1)}
.hero{padding-top:64px}
.hero h1{animation:none!important;background:none;color:#252c28}
.hero-word{display:inline-block;overflow:visible;vertical-align:baseline;padding:0;margin:0}
.hero-word>span{display:inline-block;color:inherit;transform-origin:0 100%}
.role-demo{width:720px;height:248px;margin-top:32px;pointer-events:auto;perspective:1000px}
.demo-toolbar{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}
.demo-tabs{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border:1px solid #e6ece8;background:#fbfcfb;border-radius:12px;box-shadow:0 4px 16px #304c3505}
.demo-tab-indicator{position:absolute;z-index:-1;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/3);border:1px solid #cfe3d5;background:#e9f5ed;border-radius:8px;transform:translateX(calc(var(--demo-stage,0)*100%));transition:transform 550ms var(--snap),background-color 300ms var(--snap)}
.demo-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;border:0;background:transparent;color:#8c9890;font:inherit;font-size:12px;line-height:16px;font-weight:500;white-space:nowrap;border-radius:8px;transition:color 300ms var(--snap)}
.demo-tabs button[aria-selected=true]{color:#375f45}
.demo-tab-dot{width:4px;height:4px;background:currentColor;border-radius:50%;opacity:.7}
.demo-pause{position:relative;display:grid;place-items:center;width:32px;height:32px;border:1px solid #e6ece8;border-radius:50%;background:white;color:#7d8d82;transition:transform 500ms var(--snap),background-color 300ms var(--snap)}
.demo-pause:hover{background:#edf7f0;transform:scale(1.12)}
.demo-pause>span{width:8px;height:8px;border:solid currentColor;border-width:0 2px}
.demo-pause[aria-pressed=true]>span{width:0;height:0;border:solid transparent;border-width:4px 0 4px 6px;border-left-color:currentColor;margin-left:2px}
.demo-scene{position:relative;height:168px;display:flex;align-items:center;justify-content:center}
.demo-connection{position:absolute;top:50%;left:64px;right:64px;height:1px;background:#e0e8e3}
.demo-connection>span{display:block;height:2px;background:#a6c9b1;transform:scaleX(calc((var(--demo-stage,0) + 1)/3));transform-origin:left;transition:transform 700ms var(--snap)}
.demo-connection i{position:absolute;top:-2px;width:6px;height:6px;border-radius:50%;background:#c1d8c8}
.demo-connection i:nth-of-type(1){left:8%}.demo-connection i:nth-of-type(2){left:50%}.demo-connection i:nth-of-type(3){right:8%}
.demo-card-wrap{position:relative;z-index:2;width:352px;transform-style:preserve-3d}
.demo-card{position:relative;padding:16px;border:1px solid #dfeae2;border-radius:16px;background:#fff;box-shadow:0 16px 40px #345b4312,0 4px 8px #345b4308;text-align:left;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform 500ms var(--snap),border-color 300ms var(--snap);will-change:transform}
.demo-card::before,.demo-card::after{content:"";position:absolute;inset:8px 8px -8px;border-radius:12px;background:#edf5ef;border:1px solid #e2ebe4;z-index:-1;transform:translateZ(-1px) rotate(2deg)}
.demo-card::after{inset:16px 16px -16px;background:#f2f0fb;border-color:#e7e5ef;transform:translateZ(-2px) rotate(-2deg);z-index:-2}
.demo-card-top{display:flex;align-items:center;justify-content:space-between;color:#8c9c91;margin-bottom:12px}
.demo-card-top>span:first-child{display:flex;align-items:center;gap:8px}
.demo-card-top #demo-counter{font-variant-numeric:tabular-nums;color:#a4b0a8}
.demo-card-content{display:flex;align-items:center;gap:12px}
.demo-main-icon{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;background:#e8f4ed;border:1px solid #d9e8de;border-radius:12px;transition:background-color 300ms var(--snap)}
.demo-main-icon img{width:24px;height:24px;opacity:.65}
.demo-card h2{font-weight:600;letter-spacing:-.3px}
.demo-card-content p{color:#849489;margin-top:4px;max-width:232px}
.demo-skills{display:flex;gap:8px;padding-left:48px;margin-top:12px;color:#829889}
.demo-skills span{padding:2px 8px;background:#f3f8f4;border:1px solid #e7eee9;border-radius:4px}
.demo-side{position:absolute;z-index:1;width:160px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border:1px solid #e6ece8;background:#fff;border-radius:12px;box-shadow:0 8px 24px #33564008;text-align:left;transition:transform 700ms var(--snap),opacity 300ms var(--snap)}
.demo-customer{left:0;transform:translateY(-8px) rotate(-7deg)}
.demo-solution{right:0;transform:translateY(8px) rotate(7deg) scale(.94);opacity:.55}
.demo-side>.caption-3{color:#6d8073}
.demo-side>.caption-5{color:#a0aca4}
.demo-node-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;margin-bottom:4px}
.demo-node-icon img{width:16px;height:16px;opacity:.55}
.demo-done{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#cfead8;opacity:0;transform:scale(.4);transition:transform 500ms var(--snap),opacity 300ms var(--snap)}
.demo-done img{width:12px;height:12px;opacity:.65}
.role-demo[data-stage="1"] .demo-customer{transform:translate(-8px,0) rotate(-4deg);opacity:.65}
.role-demo[data-stage="1"] .demo-solution{transform:translate(8px,0) rotate(4deg);opacity:.65}
.role-demo[data-stage="1"] .demo-main-icon{background:#eeeafb;border-color:#e0dcef}
.role-demo[data-stage="1"] .demo-tab-indicator{background:#efecfb;border-color:#ded7ee}
.role-demo[data-stage="2"] .demo-customer{transform:translateY(8px) rotate(-4deg) scale(.94);opacity:.55}
.role-demo[data-stage="2"] .demo-solution{transform:translateY(-8px) rotate(4deg) scale(1);opacity:1}
.role-demo[data-stage="2"] .demo-done{opacity:1;transform:scale(1)}
.role-demo[data-stage="2"] .demo-main-icon{background:#edf4fd;border-color:#dce7f3}
.role-demo[data-stage="2"] .demo-tab-indicator{background:#ecf3fc;border-color:#d6e3f3}
.demo-footer{display:flex;justify-content:center;align-items:center;gap:12px;color:#9aaba0;margin-top:16px}
.demo-footer-line{height:1px;width:24px;background:#e0e9e3}
.button-dark{position:relative;isolation:isolate;overflow:hidden;transition:transform 500ms var(--snap),color 300ms var(--snap),box-shadow 300ms var(--snap)}
.button-dark::before{content:"";position:absolute;z-index:-1;right:-8px;top:50%;height:24px;width:24px;border-radius:50%;background:#d6f4df;transform:translateY(-50%) scale(0);transition:transform 600ms var(--snap)}
.button-dark:hover{color:#264b34;background:#212322;border-color:#212322;transform:translateY(-3px);box-shadow:0 8px 16px #2f57351a}
.button-dark:hover::before{transform:translateY(-50%) scale(24)}
.button-dark:hover .icon{filter:invert(21%) sepia(14%) saturate(1084%) hue-rotate(93deg);transform:translate(3px,-3px) rotate(4deg)}
.button:active{transform:translateY(1px) scale(.96)!important}
.benefit-grid{gap:16px;background:transparent}
.benefit{position:relative;border:1px solid #edf1ee;border-radius:16px;transition:transform 600ms var(--snap),box-shadow 300ms var(--snap),background-color 300ms var(--snap);overflow:hidden}
.benefit .feature-icon{width:40px;height:40px;border-radius:12px}
.benefit .feature-icon img{width:24px;height:24px}
.benefit:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 16px 32px #324e3910;background:#fcfefc}
.benefit:hover .feature-icon{transform:translateY(-4px) rotate(-10deg) scale(1.12)}
.process-step .process-art{transition:transform 600ms var(--snap),box-shadow 300ms var(--snap)}
.process-step:hover .process-art{transform:translateY(-8px);box-shadow:0 16px 32px #293b3610}
.process-step .step-number{transition:transform 500ms var(--snap),background-color 300ms var(--snap),color 300ms var(--snap)}
.process-step:hover .step-number{transform:scale(1.18);background:#dff1e5;color:#426d51}
.brief-dialog{width:min(640px,calc(100% - 32px));max-width:640px;height:688px;max-height:calc(100dvh - 32px);padding:32px;overflow:hidden}
.brief-dialog[open]{display:flex;flex-direction:column}
.brief-progress{flex-shrink:0;margin-bottom:24px}
.brief-dialog-heading{flex-shrink:0;padding-bottom:8px}
#brief-form-view,#brief-ready-view{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d2e1d7 transparent}
.brief-dialog form{min-height:100%;display:flex;flex-direction:column;margin-top:0;padding-top:16px;gap:16px}
.brief-step{gap:12px}
.brief-form-actions{margin-top:auto;padding:16px 0 0;background:white;flex-shrink:0}
.brief-dialog>.form-note{flex-shrink:0;margin-top:16px}
.mission-options{display:grid;gap:8px}
.mission-option{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #e4ebe6;border-radius:12px;background:#fff;text-align:left;transition:transform 500ms var(--snap),background-color 300ms var(--snap),border-color 300ms var(--snap),box-shadow 300ms var(--snap)}
.mission-option>span:nth-child(2){display:grid;gap:2px;min-width:0}
.mission-option strong{font-weight:500;font-size:14px;line-height:20px}
.mission-option .caption-5{color:#91a096}
.mission-option .feature-icon{margin:0;width:32px;height:32px;border-radius:8px}
.mission-option:hover{transform:translateX(4px);background:#f6faf7;border-color:#c8dccc}
.mission-option[aria-checked=true]{background:#eef7f1;border-color:#a7cbb3;box-shadow:0 4px 12px #315d3a0a;transform:translateX(4px)}
.mission-option-check{position:relative;width:16px;height:16px;border:1px solid #d6e2da;border-radius:50%;margin-left:auto;flex-shrink:0;transition:transform 500ms var(--snap),background-color 300ms var(--snap)}
.mission-option[aria-checked=true] .mission-option-check{background:#659775;border-color:#659775;transform:scale(1.12)}
.mission-option[aria-checked=true] .mission-option-check::after{content:"";position:absolute;width:6px;height:3px;border:solid white;border-width:0 0 1px 1px;left:4px;top:4px;transform:rotate(-45deg)}
.mission-detail{padding:12px;background:#f7faf8;border:1px solid #e4ece6;border-radius:12px}
.mission-detail textarea{margin-top:8px;min-height:80px}
#custom-mission{text-align:left;justify-self:start;color:#758e7d;font-size:12px;line-height:16px;padding:4px 0}
.skills-field{display:none!important}
.has-mission .skills-field{display:block!important}
.team-context{display:flex;align-items:center;gap:12px;margin:8px 0 16px;padding:16px;border:1px solid #e2ece5;background:#f5faf7;border-radius:12px;color:#7f9586}
.team-context .feature-icon{margin:0}
.brief-review{margin-top:16px}
.brief-dialog[data-step="2"] .review-banner .feature-icon{animation:check-pop 650ms var(--snap) both}
.brief-dialog[data-step="2"] .review-banner .feature-icon img{animation:check-pop 650ms var(--snap) 120ms both}
.brief-dialog[data-step="2"] .brief-ready-actions{padding-bottom:4px}
@keyframes word-lift{0%{opacity:0;transform:translateY(.45em) rotate(3deg)}75%{opacity:1;transform:translateY(-.03em) rotate(-.5deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes card-land{0%{opacity:0;transform:translateY(40px) rotate(-4deg) scale(.9)}70%{opacity:1;transform:translateY(-4px) rotate(1deg) scale(1.02)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes side-land{0%{opacity:0;translate:0 32px;scale:.85}75%{opacity:1;translate:0 -4px;scale:1.025}100%{opacity:1;translate:0 0;scale:1}}
@keyframes modal-snap{0%{opacity:0;transform:translateY(32px) scale(.92)}75%{opacity:1;transform:translateY(-4px) scale(1.01)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes check-pop{0%{opacity:0;transform:scale(.3) rotate(-20deg)}70%{opacity:1;transform:scale(1.16) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:no-preference){
 .hero-word>span{animation:word-lift 700ms var(--snap) calc(var(--word,0)*45ms + 80ms) both}
 .role-demo{animation:none}
 .demo-toolbar{animation:soft-enter 650ms var(--snap) 400ms both}
 .demo-card-wrap{animation:card-land 900ms var(--snap) 550ms both}
 .demo-customer{animation:side-land 850ms var(--snap) 700ms both}
 .demo-solution{animation:side-land 850ms var(--snap) 850ms both}
 .demo-footer{animation:soft-enter 650ms var(--snap) 900ms both}
 .brief-dialog[open]{animation:modal-snap 550ms var(--snap) both}
}
@media(max-width:900px){.demo-side{width:144px;padding:12px 8px}.demo-card-wrap{width:328px}.demo-card{padding:12px}.demo-tabs button{padding:8px 12px}}
@media(max-width:680px){
 .hero{padding-top:48px}.hero-visual.role-demo{width:358px;height:248px;margin-top:32px}
 .demo-side,.demo-connection{display:none}.demo-card-wrap{width:100%;max-width:336px}
 .demo-card{padding:16px}.demo-card h2{font-size:14px;line-height:20px}
 .demo-tabs button{padding:8px 12px}.demo-toolbar{gap:8px}.demo-pause{width:24px;height:24px}
 .demo-scene{height:168px}.demo-footer{margin-top:12px;gap:8px}
 .benefit{padding:24px 16px}.benefit+.benefit{border:1px solid #edf1ee}.benefit-grid{gap:12px}
 .brief-dialog{height:780px;padding:32px 24px 24px}
 .brief-progress{margin-bottom:16px}.brief-dialog-heading .section-label{margin-bottom:8px}
 .brief-dialog-heading .heading-4{font-size:24px;line-height:32px}
 .brief-dialog-heading .dialog-intro{margin-top:8px;font-size:12px;line-height:16px}
 .brief-dialog form{gap:12px;padding-top:12px}.brief-step{gap:8px}
 .mission-option{padding:12px 8px;gap:8px}.mission-option strong{font-size:12px;line-height:16px}
 .mission-option .caption-5{font-size:12px;line-height:16px}.mission-option .feature-icon{width:24px;height:24px;flex-shrink:0}
 .mission-option .feature-icon img{width:16px;height:16px}.mission-option-check{width:16px;height:16px}
 .brief-form-actions{position:sticky;bottom:0;padding-top:12px;z-index:2}
 .brief-dialog>.form-note{font-size:12px;line-height:16px;margin-top:12px;padding-top:12px}
 .team-context{margin:4px 0 12px;padding:12px}.brief-dialog input{padding:8px 12px}
}
@media(hover:none){.benefit:hover,.process-step:hover .process-art{transform:none}.button-dark:hover{transform:none}.button-dark:active::before{transform:translateY(-50%) scale(24)}}
@media(prefers-reduced-motion:reduce){
 .hero-word>span,.demo-toolbar,.demo-card-wrap,.demo-side,.demo-footer{animation:none!important;opacity:1}
 .demo-card{transform:none!important;will-change:auto}.demo-side{translate:none;scale:1}
 .benefit:hover,.process-step:hover .process-art,.process-step:hover .step-number,.mission-option:hover,.mission-option[aria-checked=true]{transform:none}
 .button-dark:hover{transform:none}.button-dark::before{display:none}.button-dark:hover{background:#d6f4df;color:#264b34}
}

.demo-card-wrap{isolation:isolate;transform-style:flat}
.demo-card{z-index:1}
.demo-card::before,.demo-card::after{display:none}
.demo-card-wrap::before,.demo-card-wrap::after{content:"";position:absolute;inset:8px 8px -8px;z-index:0;border:1px solid #e2ebe4;border-radius:12px;background:#edf5ef;transform:rotate(2deg)}
.demo-card-wrap::after{inset:16px 16px -16px;z-index:-1;background:#f2f0fb;border-color:#e7e5ef;transform:rotate(-2deg)}