/* Visual exploration: the content and the software previews stay unchanged. */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
.site-header { background: #f8f9f3f5; }
.desktop-nav a::after { opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--motion-ease); }
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after,.desktop-nav a[aria-current]::after { transform: scaleX(1); }
.logo-dot { display: inline-block; transition: transform .4s var(--motion-ease); }
.logo:hover .logo-dot { transform: translateY(-3px); }
.hero { position: relative; isolation: isolate; }
.hero-atmosphere { position: absolute; inset: 0 0 auto; height: 360px; pointer-events: none; z-index: -1; overflow: clip; }
.hero-wash { position: absolute; width: 100%; height: 100%; inset: 0; background: radial-gradient(ellipse at 31% 45%,#e8efce80,transparent 51%),radial-gradient(ellipse at 77% 15%,#e8e3f380,transparent 48%); mask-image: linear-gradient(#000 78%,transparent); }
.shape-anchor { position: absolute; transition: translate .7s var(--motion-ease); translate: var(--scene-x,0) var(--scene-y,0); }
.ring-anchor { left: 5%; top: 126px; }
.soft-ring { width: 100px; height: 100px; border: 23px solid #b9cd8e; border-radius: 50%; background: transparent; box-shadow: inset 4px 6px 9px #71865540,inset -3px -4px 5px #eff5d3,6px 10px 0 #93ac6e,9px 17px 20px #4865401f; transform: rotate(-27deg) rotateX(22deg); animation: ring-drift 9s ease-in-out infinite; animation-play-state: paused; }
.pebble-anchor { right: 5%; top: 94px; }
.soft-pebble { width: 95px; height: 108px; position: relative; background: linear-gradient(135deg,#f1eefa 3%,#d4c9e6 55%,#ae9bc9); border-radius: 29px; box-shadow: inset 3px 3px 7px #fff8,inset -5px -7px 9px #8c79b655,9px 16px 20px #76648c24; transform: rotate(18deg); animation: pebble-drift 11s ease-in-out infinite; animation-play-state: paused; }
.soft-pebble span { position: absolute; inset: 23px; border: 2px solid #fff8; border-radius: 14px; box-shadow: 0 2px 4px #9d89bf42,inset 0 2px 4px #9d89bf42; }
.scene-spark { position: absolute; top: 270px; right: 15%; color: #9ba875; transform: rotate(14deg); }
.scene-spark .icon { width: 23px; height: 23px; }
.hero.is-in-view .soft-ring,.hero.is-in-view .soft-pebble { animation-play-state: running; }
.hero-heading h1 { animation: title-settle .85s var(--motion-ease) both; }
.hero-subtitle { animation: copy-settle .7s .1s var(--motion-ease) both; }
.hero-actions { animation: copy-settle .7s .18s var(--motion-ease) both; }
.hero-journey { gap: 15px; font-size: 12px; margin-top: 32px; }
.hero-journey li { gap: 15px; }
.hero-journey li>span { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 5px 13px 5px 6px; border-radius: 24px; border: 1px solid #dce1d7; background: #fffef9bf; box-shadow: 0 3px 8px #293b3104; }
.journey-number { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #e9eedc; color: var(--green); font-size: 11px; font-weight: 600; font-style: normal; flex-shrink: 0; }
.hero-journey li:nth-child(2) .journey-number { background: #f5e8d8; }
.hero-journey li:nth-child(3) .journey-number { background: #e9e3f4; }
.video-placeholder { border: 1px solid #dce1d77d; background: #edf0e9; box-shadow: inset 0 1px 0 #fff9; }
.button { position: relative; isolation: isolate; overflow: hidden; transition: transform .35s var(--motion-ease),box-shadow .35s var(--motion-ease),background-color .25s; }
.button.primary { gap: 16px; padding: 10px 12px 10px 23px; box-shadow: 0 4px 0 #203b2b,0 8px 14px #35544218; }
.button.primary::before { content: ''; position: absolute; z-index: -1; inset: -110% 35% -110% -70%; border-radius: 50%; background: #4b7058; transform: scale(0); transform-origin: 25% 50%; transition: transform .6s var(--motion-ease); }
.button.primary>.icon { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: #ffffff20; transition: transform .4s var(--motion-ease),background-color .3s; }
.button.primary:is(:hover,:focus-visible) { transform: translateY(-3px); box-shadow: 0 7px 0 #203b2b,0 13px 22px #35544220; background: var(--green); }
.button.primary:is(:hover,:focus-visible)::before { transform: scale(2); }
.button.primary:is(:hover,:focus-visible)>.icon { transform: rotate(-35deg); background: #ffffff36; }
.button.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #203b2b; }
.button.secondary:not(:disabled) { box-shadow: 0 3px 0 #c2cc94; }
.button.secondary:not(:disabled):is(:hover,:focus-visible) { transform: translateY(-3px); box-shadow: 0 6px 0 #c2cc94,0 12px 20px #53634014; }
.button.secondary:not(:disabled)>.icon { transition: transform .35s var(--motion-ease); }
.button.secondary:not(:disabled):is(:hover,:focus-visible)>.icon { transform: translateY(3px); }
.search-field { border-color: #dce1d7; border-radius: 16px; background: #fffefb; box-shadow: 0 6px 20px #293b3105; transition: border-color .25s,box-shadow .3s; }
.search-field:focus-within { border-color: #6d8c63; box-shadow: 0 0 0 4px #dfe9d8,0 10px 25px #293b3108; }
.search-field>.icon { transition: transform .35s var(--motion-ease); }
.search-field:focus-within>.icon { transform: rotate(-12deg) scale(1.12); }
.filter { transition: transform .3s var(--motion-ease),background-color .25s,box-shadow .25s; }
.filter:hover { transform: translateY(-2px); background: #e9eedf; }
.filter[aria-pressed="true"] { box-shadow: 0 3px 0 #b0bfa4; }
.filter:active { transform: scale(.97); }
.tool-card { perspective: 900px; transition: transform .4s var(--motion-ease); }
.tool-card:is(:hover,:focus-visible) { transform: translateY(-5px); }
.card-preview { border: 1px solid #ffffff90; transform: rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .4s var(--motion-ease),box-shadow .4s var(--motion-ease); box-shadow: 0 2px 0 #293b3108; }
.tool-card:is(:hover,:focus-visible) .card-preview { box-shadow: 0 18px 30px -13px #293b3138; }
.card-preview::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid #fff8; pointer-events: none; }
.tool-card .tool-visual { transition: transform .6s var(--motion-ease); }
.tool-card:is(:hover,:focus-visible) .tool-visual { transform: scale(1.025); }
.card-open { width: 37px; height: 37px; background: #fffefbe8; box-shadow: 0 3px 9px #293b310d; transition: background-color .3s,transform .4s var(--motion-ease),color .3s; }
.tool-card:is(:hover,:focus-visible) .card-open { transform: rotate(-7deg) scale(1.08); background: var(--ink); color: white; }
.tool-card:is(:hover,:focus-visible) .card-open>.icon { animation: arrow-pass .4s var(--motion-ease); }
.preview-badge { background: #fffefbed; }
.card-content h3 { transition: color .25s; }
.tool-card:hover .card-content h3 { color: #4c704c; }
.workflow-section { position: relative; isolation: isolate; overflow: clip; background: #eef2e3; }
.workflow-section::before { content: ''; position: absolute; width: 570px; height: 570px; border: 60px solid #dce5c16b; border-radius: 50%; left: -320px; top: -300px; z-index: -1; animation: orbit-drift 19s ease-in-out infinite; animation-play-state: paused; }
.workflow-section::after { content: ''; position: absolute; width: 460px; height: 320px; background: #e0e8c870; border-radius: 52% 48% 44% 56%; right: -190px; bottom: -210px; transform: rotate(-20deg); z-index: -1; animation: field-drift 17s ease-in-out infinite; animation-play-state: paused; }
.workflow-section.is-in-view::before,.workflow-section.is-in-view::after { animation-play-state: running; }
.step-art { width: 72px; height: 72px; border: 1px solid #fff6; box-shadow: inset 2px 2px 4px #ffffff70,0 7px 0 #b4c79b,0 12px 20px #5c75501a; transform: rotate(-6deg); transition: transform .5s var(--motion-ease),box-shadow .5s var(--motion-ease); }
.step-art-1 { transform: rotate(5deg); box-shadow: inset 2px 2px 4px #ffffff70,0 7px 0 #cbb98d,0 12px 20px #7564421a; }
.step-art-2 { transform: rotate(-8deg); box-shadow: inset 2px 2px 4px #ffffff70,0 7px 0 #b8a6ca,0 12px 20px #74618b1a; }
.workflow-steps li:hover .step-art { transform: translateY(-6px) rotate(0deg); }
.workflow-steps li:hover .step-art>.icon { animation: icon-nod .6s var(--motion-ease); }
.workflow-section.has-entered .step-art { animation: object-arrive .8s var(--motion-ease) both; }
.workflow-section.has-entered li:nth-child(2) .step-art { animation-delay: .09s; }
.workflow-section.has-entered li:nth-child(3) .step-art { animation-delay: .18s; }
.detail-preview .tool-visual { box-shadow: inset 0 1px 0 #fff8,0 14px 35px -22px #293b3140; border: 1px solid #dce1d7; }
.prompt-list blockquote { border: 1px solid #ded7eb; box-shadow: 0 3px 0 #d9d1e6; transition: transform .35s var(--motion-ease),background-color .3s,box-shadow .3s; }
.prompt-list blockquote:hover { transform: translateY(-3px) rotate(-1deg); background: #e6def2; box-shadow: 0 6px 0 #d9d1e6; }
.guide-illustration img { transition: transform .8s var(--motion-ease); }
.guide-illustration.has-entered img { animation: object-arrive .85s var(--motion-ease) both; }
.first-message { border: 1px solid #d9d1e9; box-shadow: 6px 8px 0 #e9e4f0; }
.faq-list details { transition: background-color .25s,padding .3s var(--motion-ease); }
.faq-list details[open] { background: #eef2e6; padding-inline: 18px; border-radius: 14px; }
.faq-list summary>.icon { transition: transform .35s var(--motion-ease); }
.faq-list details[open] summary>.icon { transform: rotate(45deg); }
.faq-list details[open]>p { animation: copy-settle .25s var(--motion-ease) both; }
.motion-control { position: fixed; right: 18px; bottom: 18px; z-index: 19; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #d2dcc8; border-radius: 50%; background: #f8f9f3f5; color: #52664c; box-shadow: 0 4px 15px #293b310e; transition: transform .25s,background-color .25s; }
.motion-control:hover { background: #e7eedb; transform: scale(1.06); }
.motion-pause-icon { display: flex; gap: 4px; }
.motion-pause-icon i { width: 3px; height: 12px; border-radius: 2px; background: currentColor; }
.motion-resume-icon { display: none; width: 18px; height: 18px; }
.motion-control[aria-pressed="true"] .motion-pause-icon { display: none; }
.motion-control[aria-pressed="true"] .motion-resume-icon { display: block; }
.ambient-paused .hero .soft-ring,.ambient-paused .hero .soft-pebble,.ambient-paused .workflow-section::before,.ambient-paused .workflow-section::after,.motion-tab-hidden .hero .soft-ring,.motion-tab-hidden .hero .soft-pebble,.motion-tab-hidden .workflow-section::before,.motion-tab-hidden .workflow-section::after { animation-play-state: paused; }
@keyframes ring-drift { 0%,100% { transform: translateY(0) rotate(-27deg) rotateX(22deg); } 50% { transform: translateY(-17px) rotate(-16deg) rotateX(35deg); } }
@keyframes pebble-drift { 0%,100% { transform: translateY(0) rotate(18deg); } 50% { transform: translateY(14px) rotate(8deg); } }
@keyframes orbit-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(60px,30px); } }
@keyframes field-drift { 0%,100% { transform: rotate(-20deg) translateY(0); } 50% { transform: rotate(-12deg) translateY(-35px); } }
@keyframes title-settle { from { opacity: .1; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes copy-settle { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes object-arrive { from { opacity: .2; translate: 0 14px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes arrow-pass { 45% { transform: translate(8px,-8px); opacity: 0; } 46% { transform: translate(-8px,8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes icon-nod { 40% { transform: rotate(-14deg) scale(1.1); } 100% { transform: none; } }
@media(min-width: 1450px) { .ring-anchor { left: 3%; } .pebble-anchor { right: 3%; } }
@media(max-width: 1100px) { .ring-anchor { left: 0; top: 188px; scale: .75; } .pebble-anchor { right: 0; top: 168px; scale: .75; } .scene-spark { right: 10%; } }
@media(max-width: 800px) { .hero-atmosphere { inset-inline: 0; } .ring-anchor { left: -14px; top: 226px; scale: .6; } .pebble-anchor { right: -10px; top: 225px; scale: .6; } .hero-journey { gap: 8px; } .hero-journey li { gap: 8px; } .hero-journey li>span { padding-right: 9px; gap: 7px; font-size: 10px; } .scene-spark { display: none; } }
@media(max-width: 640px) {
  .hero { padding-top: 40px; }
  .hero-atmosphere { height: 280px; }
  .ring-anchor { left: -28px; top: -25px; scale: .42; opacity: .75; }
  .pebble-anchor { right: -28px; top: -25px; scale: .43; opacity: .65; }
  .hero-heading h1 { position: relative; }
  .hero-journey { gap: 10px; margin-top: 30px; font-size: 11px; }
  .hero-journey li { gap: 16px; }
  .hero-journey li>span { min-height: 36px; font-size: 11px; }
  .hero-journey li>.icon { width: 14px; height: 14px; }
  .workflow-steps .step-art { width: 58px; height: 58px; }
  .workflow-section::before { opacity: .55; }
  .motion-control { right: 12px; bottom: 12px; }
  .button.primary { padding-left: 18px; }
}
@media(hover: none) { .tool-card:hover,.tool-card:hover .tool-visual { transform: none; } .card-preview { transform: none; } }
@media(prefers-reduced-motion: reduce) {
  .hero-heading h1,.hero-subtitle,.hero-actions,.soft-ring,.soft-pebble,.workflow-section::before,.workflow-section::after,.workflow-section.has-entered .step-art,.guide-illustration.has-entered img,.faq-list details[open]>p,.tool-card:is(:hover,:focus-visible) .card-open>.icon,.workflow-steps li:hover .step-art>.icon { animation: none; }
  .button,.button::before,.button>.icon,.card-preview,.tool-card,.tool-card .tool-visual,.card-open,.search-field,.search-field>.icon,.filter,.logo-dot,.desktop-nav a::after,.prompt-list blockquote,.step-art,.shape-anchor,.faq-list details,.faq-list summary>.icon,.motion-control { transition: none; }
  .button:is(:hover,:focus-visible),.button.primary:is(:hover,:focus-visible),.button.primary:is(:hover,:focus-visible)>.icon,.button.secondary:not(:disabled):is(:hover,:focus-visible),.button.secondary:not(:disabled):is(:hover,:focus-visible)>.icon,.tool-card:is(:hover,:focus-visible),.tool-card:is(:hover,:focus-visible) .tool-visual,.tool-card:is(:hover,:focus-visible) .card-open,.filter:hover,.filter:active,.prompt-list blockquote:hover,.workflow-steps li:hover .step-art,.logo:hover .logo-dot,.search-field:focus-within>.icon { transform: none; }
  .shape-anchor { translate: none; }
  .motion-control { display: none; }
}