/* Motion is progressive enhancement: every section remains visible without JS. */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -1; width: 60%; height: 85%; right: -3%; top: 3%; pointer-events: none; background: radial-gradient(ellipse, #91a57815, transparent 67%); }
.hero-title-line { display: block; overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-title-line > span { display: inline-block; }
.demo-window { position: relative; transition: box-shadow .5s, border-color .5s; }
.demo-window:hover { box-shadow: 0 32px 90px #03150c90, 0 0 0 1px #c2cba840; border-color: #c1cda9; }
.demo-titlebar { position: relative; }
.demo-titlebar::after { content: ''; position: absolute; bottom: -1px; left: 0; height: 1px; width: 100%; background: linear-gradient(90deg,transparent,#ac874a,transparent); }
.chat-message { animation: none; }
.sample-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 12px; }
.sample-toolbar .demo-caption { margin: 0; text-align: left; }
.sample-play { display: inline-flex; align-items: center; gap: 8px; background: none; color: #cfdbc5; border: 0; padding: 10px 0 10px 10px; min-height: 44px; font-size: 12px; white-space: nowrap; }
.sample-play .icon { width: 15px; height: 15px; }
.sample-play:hover { color: var(--gold-text); }
.button .icon, .text-link .icon { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.button:hover .icon, .text-link:hover .icon { transform: translate(3px,-2px); }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content: ''; position: absolute; inset: auto 0 -7px; height: 1px; background: var(--gold-text); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.desktop-nav a:hover::after { transform: scaleX(1); }
.benefit-list article { transition: transform .3s; }
.benefit-list article:hover { transform: translateX(6px); }
.setup-grid article { position: relative; }
.setup-grid article::before { content: ''; position: absolute; height: 2px; left: 0; top: -1px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--gold-text); transition: transform .6s cubic-bezier(.22,1,.36,1); }
.setup-grid article:hover::before { transform: scaleX(1); }
.demo-invitation { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; padding-block: 86px; border-bottom: 1px solid var(--line); }
.demo-invitation h2 { margin-bottom: 24px; font-size: clamp(42px,4.2vw,61px); }
.demo-invitation .eyebrow { margin-bottom: 20px; }
.invitation-link { display: inline-flex; align-items: center; gap: 19px; font-size: 16px; }
.invitation-link > span { display: grid; place-items: center; height: 49px; width: 49px; border-radius: 50%; background: var(--brass); color: #101c15; transition: transform .4s; }
.invitation-link:hover > span { transform: rotate(-35deg); }
.invitation-preview { display: block; border: 1px solid #83907470; border-radius: 10px; padding: 30px; background: #26372b; position: relative; transition: background .3s, transform .4s; }
.invitation-preview:hover { background: #2b4131; transform: translateY(-4px); }
.invitation-top { display: flex; align-items: center; justify-content: space-between; color: #bac9ad; font-size: 13px; margin-bottom: 32px; }
.invitation-dots { display: flex; gap: 5px; }
.invitation-dots i { border-radius: 50%; width: 5px; height: 5px; background: #7c9170; }
.invitation-question { font-family: var(--display); font-size: clamp(23px,2.5vw,34px); line-height: 1.4; letter-spacing: -.6px; max-width: 400px; color: #eef1e5; margin-bottom: 27px; }
.invitation-compose { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: 5px; padding: 14px 15px; background: #e8edde; color: #59694b; font-size: 14px; }
.invitation-compose .icon { width: 29px; height: 29px; background: var(--teal); color: #fff; padding: 6px; border-radius: 4px; }
.motion-toggle { background: transparent; border: 1px solid #50634b; color: #b9c7ac; border-radius: 4px; padding: 7px 10px; min-height: 36px; font-size: 12px; }
.motion-toggle:hover { border-color: #99ac8d; color: #edf3e2; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (max-width:850px) { .demo-invitation { grid-template-columns: 1fr; gap: 32px; padding-block: 52px; } .invitation-preview { max-width: 570px; width: 100%; padding: 25px; } .demo-invitation h2 { font-size: 46px; } .invitation-top { margin-bottom: 25px; } .invitation-question { font-size: 29px; } .sample-toolbar { gap: 8px; } .sample-toolbar .demo-caption { max-width: 190px; line-height: 1.6; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* The network is a quiet brand illustration; the conversation remains primary. */
.demo-invitation { padding-block: 94px; }
.invitation-preview { background: linear-gradient(145deg,#263b30,#1b2d24); overflow: hidden; translate: 0 var(--scene-shift,0px); scale: var(--scene-scale,1); box-shadow: 0 28px 80px #07150e40; }
.invitation-top { margin-bottom: 0; }
.intelligence-field { position: relative; height: 235px; margin: 0 -20px 14px; pointer-events: none; }
.intelligence-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intelligence-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 65px; height: 65px; border: 1px solid #c3a36370; border-radius: 18px; background: #203329e8; box-shadow: 0 0 32px #b8863b23, inset 0 0 14px #e1c3880a; }
.intelligence-core img { width: 40px; height: 40px; border-radius: 10px; }
.flow-endpoint { position: absolute; top: 50%; width: 0; height: 0; color: #dce5d2; }
.flow-customer { left: 13%; }
.flow-business { left: 87%; }
.flow-node { display: grid; place-items: center; width: 48px; height: 48px; transform: translate(-50%,-50%); border: 1px solid rgba(193,175,128,calc(.3 + var(--flow-light,0)*.6)); border-radius: 13px; background: #243c30; box-shadow: 0 0 25px rgba(214,179,108,calc(var(--flow-light,0)*.17)); }
.flow-node .icon { width: 23px; height: 23px; color: #d4c394; }
.flow-label { position: absolute; top: 37px; left: 0; translate: -50% 0; white-space: nowrap; font-size: 14px; font-weight: 500; line-height: 1.4; }
.intelligence-label { position: absolute; top: calc(50% + var(--network-radius,76px) + 10px); left: 50%; translate: -50% 0; color: #d4c394; white-space: nowrap; font-size: 14px; font-weight: 500; line-height: 1.4; }
.intelligence-core { border-color: rgba(209,179,115,calc(.45 + var(--flow-light,0)*.5)); box-shadow: 0 0 calc(24px + var(--flow-light,0)*22px) rgba(204,167,91,calc(.12 + var(--flow-light,0)*.2)), inset 0 0 14px #e1c3880a; }
.invitation-question { font-size: clamp(23px,2.2vw,29px); margin-bottom: 24px; }
.demo-invitation h2 { font-size: clamp(46px,5vw,70px); }
.setup-grid article::before { transform: scaleX(clamp(0,calc(var(--scene-progress,.5) * 2 - .25),1)); transition: none; }
.setup-grid article:nth-child(2)::before { transform: scaleX(clamp(0,calc(var(--scene-progress,.5) * 2 - .5),1)); }
.setup-grid article:nth-child(3)::before { transform: scaleX(clamp(0,calc(var(--scene-progress,.5) * 2 - .75),1)); }
.step-number { display: inline-block; translate: 0 var(--scene-shift,0px); }
.pricing-copy { translate: 0 var(--scene-shift,0px); }
.contact-section { position: relative; isolation: isolate; overflow: clip; }
.contact-section::before { content: ''; position: absolute; inset: -30%; z-index: -1; background: radial-gradient(ellipse at 65% 50%,#b8863b18,transparent 60%); translate: var(--scene-shift,0px) 0; }
.motion-paused .invitation-preview,.motion-paused .pricing-copy,.motion-paused .step-number { translate: none; scale: 1; }
@media (max-width:850px) { .demo-invitation { padding-block: 60px; } .intelligence-field { height: 220px; } .demo-invitation h2 { font-size: 46px; } }
@media (prefers-reduced-motion:reduce) { .invitation-preview,.pricing-copy,.step-number { translate: none !important; scale: 1 !important; } }

@media (max-width:400px) { .flow-business .flow-label { left: -8px; } }