/* Scroll narrative and alternating editorial surfaces. No build required. */
html { scroll-padding-top: 24px; }
body { overflow-x: clip; }
.reveal { opacity: 1; transform: none; }
.js-ready .reveal:not(.visible) { opacity: 1; }
.brand, .footer-brand { width: 126px; height: 64px; }
.brand img, .footer-brand img { mix-blend-mode: screen; }
.hero { gap: 26px; min-height: 720px; }
.hero h1 { font-size: clamp(3.5rem, 6.4vw, 6.2rem); }
.hero-actions { flex-wrap: wrap; }
.eyebrow, .trust-row { font-size: .75rem; line-height: 1.6; }
.stage-topbar { font-size: .75rem; letter-spacing: .06em; }
.node-detail small { font-size: .75rem; }
.node-detail strong { font-size: .95rem; }
#networkCanvas { touch-action: pan-y; }
.section-index, .card-kicker, .builder-label, .contact-builder label { font-size: .8rem; }
.contact-builder > small, .choice { font-size: .875rem; }
.card-copy p, .method-steps p { font-size: 1rem; }
.integration-section { margin-top: 100px; margin-bottom: 100px; }
.ib-node small { font-size: .75rem; }
.ib-node span { font-size: .875rem; }
.ib-node { width: 150px; }
.integration-section { padding-inline: 38px; gap: 32px; }
.integration-board .source-node { left: 12px; }
.integration-board .target { right: 12px; }
.contact { margin-top: 90px; }
.contact-notice { color: #f6d6a8; font-size: .9rem; line-height: 1.5; }
.contact-notice[hidden] { display: none; }

/* Truly white, full-width sections break up the dark chapters. */
.light-section {
  width: 100%; max-width: none; background: #fff; color: #141124;
  padding: 116px max(24px, calc((100% - 1280px)/2));
  --muted: #605e6d; --line: #dedce6; --violet-light: #6d3acc;
}
.light-section h2 em { color: #7044cb; background: none; }
.light-section .section-heading > p { color: #605e6d; }
.light-section .service-card { background: #f7f7fb; border-color: #e5e3ec; box-shadow: none; }
.light-section .service-featured { background: radial-gradient(ellipse at 60% 20%, #e4e6ff, transparent 70%), #f7f7fb; }
.light-section .card-number { color: #777180; }
.light-section .service-card:hover { border-color: #ac8ce3; box-shadow: 0 22px 42px #3211630c; }
.light-section .flow-node { color: #4d3869; border-color: #d9d2e6; background: #fff; }
.light-section .fn-main { color: #fff; background: linear-gradient(145deg,#965df1,#623bbc); border-color: #b995ed; }
.light-section .ui-shell, .light-section .web-window { color: #fff; }
.light-section .ai-core { color: #fff; }
.light-section .method-steps { border-top-color: #d9d5e4; }
.light-section .method-steps article { border-color: #d9d5e4; }
.light-section .method-steps span { font-size: .875rem; }
.light-section .section-heading h2 { max-width: 860px; }

/* Every chapter stays in document flow. Native scrolling is never intercepted. */
.scroll-story { position: relative; background: #f1f0f7; color: #181526; }
.story-sticky { width: min(1280px,calc(100% - 48px)); margin-inline: auto; padding: 70px 0; }
.story-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px 50px; align-items: end; }
.story-heading .section-index { grid-column: 1/-1; color: #7146cb; margin: 0; }
.story-heading h2 { font-size: clamp(2.6rem,4.8vw,4.6rem); line-height: 1.02; letter-spacing: -.06em; }
.story-heading h2 em { color: #7d4bdc; background: none; }
.story-heading p { max-width: 350px; font-size: 1rem; line-height: 1.65; color: #686174; }
.story-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 55px; align-items: center; margin-top: 38px; }
.story-count { display: flex; align-items: baseline; gap: 9px; font-family: Manrope,sans-serif; font-size: .9rem; color: #736c7e; }
#story-number { color: #7146cb; font-size: 2.4rem; font-weight: 700; }
.story-captions { display: grid; margin: 18px 0 22px; min-height: 154px; }
.story-captions article { grid-area: 1/1; }
.story-captions article:not(:first-child) { display: none; }
.story-captions h3 { font-size: clamp(1.35rem,2vw,1.9rem); letter-spacing: -.045em; }
.story-captions p { color: #686174; line-height: 1.7; margin: 14px 0 0; }
.story-controls { display: flex; gap: 10px; }
.story-controls button { border: 1px solid #dcd6e7; background: transparent; color: #73677f; width: 46px; height: 46px; border-radius: 50%; font-size: .85rem; cursor: pointer; transition: background .2s, color .2s; }
.story-controls button[aria-pressed=true] { background: #7547d1; color: #fff; border-color: #7547d1; }
.story-controls button:focus-visible, a:focus-visible { outline: 3px solid #9d73fb; outline-offset: 5px; }
.story-skip { display: table; margin: 25px auto 0; color: #6c617d; font-size: .875rem; }
.workflow-scene {
  position: relative; min-width: 0; height: 420px; perspective: 1200px; overflow: hidden;
  border: 1px solid #d9d1e6; border-radius: 22px;
  background: radial-gradient(ellipse at 55% 50%,#e4d7fa80,transparent 70%),radial-gradient(#c9bed8 1px,transparent 1px),#fff;
  background-size: auto,22px 22px,auto; box-shadow: 0 24px 80px #2c17481a;
}
.workflow-toolbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 15px 20px; border-bottom: 1px solid #ede8f3; color: #7f748c; font-size: .75rem; }
.workflow-toolbar > span:last-child { color: #7547d1; letter-spacing: .1em; }
.workflow-plane { position: absolute; inset: 66px 16px 68px; transform-style: preserve-3d; transform-origin: center; }
.workflow-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.workflow-wires path { fill: none; stroke: #d5c8e5; stroke-width: 2; vector-effect: non-scaling-stroke; }
.workflow-wires .wire-fills path { stroke: #8a52e2; stroke-width: 3; filter: drop-shadow(0 0 4px #ab81e366); }
.wf-node { position: absolute; width: 150px; height: 78px; display: flex; gap: 8px; align-items: center; padding: 10px; border: 1px solid #dfd6ec; border-radius: 14px; background: linear-gradient(135deg,#fff,#f9f7fc); box-shadow: 0 6px 0 #e8e2f0,0 12px 22px #4b27781a; will-change: transform, opacity; }
.wf-node div { display: grid; gap: 3px; }
.wf-node small { font-size: .65rem; color: #82768c; letter-spacing: .035em; }
.wf-node strong { font-size: .85rem; color: #292035; }
.wf-symbol { width: 33px; height: 33px; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: .75rem; color: #7745bb; background: #efe5ff; border-radius: 9px; }
.wf-wa .wf-symbol,.wf-reply .wf-symbol { background: #def5e7; color: #167d48; }
.wf-n8n .wf-symbol { color: #bd4a42; background: #ffe9e5; }
.wf-check { position: absolute; top: -8px; right: -6px; background: #21a65e; border: 3px solid white; border-radius: 50%; width: 23px; height: 23px; color: white; display: grid; place-items: center; font-size: .7rem; }
.wf-wa { left: 0; top: 50%; margin-top: -39px; }
.wf-n8n { left: 29%; top: 50%; margin-top: -39px; }
.wf-ai { right: 22%; top: 0; }
.wf-api { right: 22%; bottom: 0; }
.wf-crm { right: 0; top: 0; }
.wf-reply { right: 0; bottom: 0; }
.workflow-receipt { position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #fff; border: 1px solid #e1d8eb; border-radius: 10px; white-space: nowrap; }
.workflow-receipt > span { color: #21a65e; }
.workflow-receipt div { display: grid; gap: 2px; }
.workflow-receipt strong { font-size: .8rem; }
.workflow-receipt small { font-size: .75rem; color: #7e728c; }
.workflow-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #ece5f6; }
.workflow-progress span { display: block; height: 100%; background: #8652d8; transform-origin: left; }
.motion-ready { height: auto; min-height: 0; }
.motion-ready .story-sticky { position: relative; height: auto; min-height: 0; padding-block: 70px; }
.motion-ready .story-captions article { display: block; }
.motion-ready .story-captions article[aria-hidden=true] { visibility: hidden; }

@media(max-width:1200px) {
 .story-layout { gap: 24px; grid-template-columns: .6fr 1.4fr; }
 .wf-node { width: 128px; padding: 8px; gap: 6px; }
 .wf-symbol { width: 28px; height: 30px; font-size: .65rem; }
 .wf-node small { font-size: .6rem; }
 .wf-node strong { font-size: .78rem; }
}
@media(max-width:900px) {
 .story-heading { grid-template-columns: 1fr; gap: 10px; }
 .story-heading h2 br { display: none; }
 .story-heading p { margin: 0; max-width: none; }
 .story-layout { grid-template-columns: 1fr; gap: 18px; margin-top: 20px; }
 .story-narrative { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: start; }
 .story-captions { min-height: 96px; margin: 0; }
 .story-captions p { margin-top: 5px; line-height: 1.45; font-size: .9rem; }
 .story-controls { grid-column: 1/-1; justify-content: center; }
 .story-count { flex-direction: column; gap: 0; }
 .story-controls button { width: 44px; height: 44px; }
 .workflow-scene { height: 360px; }
 .motion-ready .story-sticky { min-height: 0; }
 .integration-section { grid-template-columns: 1fr; }
}
@media(max-width:600px) {
 .hero h1 { font-size: clamp(3rem,13vw,4.8rem); }
 .light-section { padding: 76px 20px; }
 .stage-topbar { letter-spacing: 0; }
 .story-sticky { width: calc(100% - 32px); }
 .story-heading h2 { font-size: clamp(2rem,8vw,3rem); }
 .story-heading .section-index { font-size: .7rem; }
 .story-heading > p { font-size: .85rem; line-height: 1.4; }
 .story-narrative { grid-template-columns: 45px 1fr; gap: 8px; }
 #story-number { font-size: 1.8rem; }
 .story-captions h3 { font-size: 1.2rem; }
 .story-captions { min-height: 114px; }
 .story-layout { gap: 12px; margin-top: 16px; }
 .workflow-scene { height: 326px; border-radius: 15px; }
 .workflow-plane { inset: 58px 12px 75px; }
 .workflow-toolbar { font-size: .7rem; padding: 12px; }
 .wf-node { width: 27%; min-width: 0; height: 68px; padding: 6px 2px; gap: 4px; flex-direction: column; text-align: center; border-radius: 9px; }
 .wf-node div { gap: 0; }
 .wf-node small { display: none; }
 .wf-node strong { font-size: .7rem; }
 .wf-symbol { width: 28px; height: 27px; font-size: .7rem; border-radius: 6px; }
 .wf-wa { top: 0; left: 0; margin: 0; }
 .wf-n8n { top: 0; left: 36.5%; margin: 0; }
 .wf-ai { top: 0; right: 0; }
 .wf-api { bottom: 0; right: 0; }
 .wf-crm { top: auto; bottom: 0; right: 36.5%; }
 .wf-reply { bottom: 0; right: auto; left: 0; }
 .workflow-receipt { padding: 7px 12px; bottom: 12px; }
 .motion-ready .story-sticky { padding-block: 45px; min-height: 0; }
 .story-skip { margin-top: 12px; }
 .integration-section,.contact { margin-block: 60px; }
 .ib-node { width: 132px; }
}
@media(max-height:700px) and (min-width:901px) {
 .motion-ready .story-sticky { min-height: 0; padding-block: 45px; }
 .story-heading h2 { font-size: 2.7rem; }
 .workflow-scene { height: 310px; }
 .story-layout { margin-top: 18px; }
}
/* Compact screens use the same unrestricted document flow. */
@media(max-height:670px) and (max-width:900px), (prefers-reduced-motion:reduce) {
 .motion-ready { height: auto; min-height: 0; }
 .motion-ready .story-sticky { position: relative; height: auto; max-height: none; min-height: 0; padding-block: 45px; }
 .workflow-plane,.wf-node { will-change: auto; }
 .js-ready .reveal:not(.visible) { opacity: 1; transform: none; }
}


/* The journey lives in the sections, never in a floating panel. */
.journey-page { position:relative; isolation:isolate; }
.journey-thread { position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:hidden; }
.journey-thread path { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
.journey-tracks path { stroke:#9175b8; opacity:.25; }
.journey-fills path { stroke:#9b65eb; }
.journey-stop { grid-column:1/-1; position:relative; z-index:3; width:100%; margin:0 0 38px; }
.journey-card { display:flex; align-items:center; gap:20px; width:min(100%,480px); padding:22px 24px; border:1px solid #725299; border-radius:22px; color:#f8f4ff; background:#151020; box-shadow:0 12px 35px #0002; }
.journey-right .journey-card { margin-left:auto; }
.journey-number { flex:0 0 52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:1.05rem; font-weight:700; background:#352048; border:1px solid #a379cb; color:#dec8fc; }
.journey-card small { display:block; font-size:.75rem; letter-spacing:.08em; color:#ba9cd8; margin-bottom:8px; }
.journey-card h3 { margin:0 0 8px; font-size:clamp(1.1rem,1.9vw,1.45rem); line-height:1.25; }
.journey-card p { margin:0; font-size:1rem; line-height:1.5; color:#bfb3ce; }
.light-section .journey-card,.scroll-story .journey-card { background:#fff; color:#251637; border-color:#cab4e6; box-shadow:0 10px 30px #5227860c; }
.light-section .journey-card p,.scroll-story .journey-card p { color:#62556f; }
.light-section .journey-card small,.scroll-story .journey-card small { color:#775098; }
.journey-stop.is-reached .journey-number { background:#8650ce; color:#fff; border-color:#cda7ff; box-shadow:0 0 22px #b576ef44; }
.journey-animated .journey-card { transform:translateY(calc((1 - var(--journey-entry,1))*16px)); }
@media(max-width:700px) {
 .journey-stop { margin-bottom:28px; }
 .journey-card { width:100%; padding:18px 16px; gap:12px; border-radius:17px; }
 .journey-right .journey-card { margin-left:0; }
 .journey-number { flex-basis:38px; height:38px; border-radius:12px; font-size:.9rem; }
 .journey-card small { font-size:.75rem; letter-spacing:.02em; }
}
@media(prefers-reduced-motion:reduce) { .journey-animated .journey-card { transform:none; } }

/* Continuous page choreography: geometry changes, not extra scroll distance. */
.page-motion .hero-copy { translate: 0 var(--hero-copy-y,0px); }
.page-motion .automation-stage { translate: 0 var(--hero-scene-y,0px); rotate: var(--hero-angle,0deg); }
.page-motion .hero-glow { translate: 0 var(--hero-glow-y,0px); }
.page-motion .card-visual { translate: 0 var(--visual-y,0px); rotate: var(--visual-angle,0deg); }
.page-motion .ui-data span { transform-origin: bottom; transform: scaleY(var(--bars-scale,1)); }
.page-motion .flow-visual > span { transform-origin: left; transform: scaleX(var(--flow-scale,1)); }
.page-motion .ai-core { scale: var(--core-scale,1); }
.page-motion .section-heading { translate: 0 var(--heading-y,0px); }
.page-motion .integration-board { scale: var(--board-scale,1); }
.page-motion .integration-copy { translate: 0 var(--integration-y,0px); }
.page-motion .flow-lines path { animation: none; }
.page-motion .method-steps article { position: relative; }
.page-motion .method-steps article::before { content:''; position:absolute; top:-2px; left:0; right:0; height:3px; background:#8552db; transform:scaleX(var(--method-progress,0)); transform-origin:left; }
.page-motion .contact-copy { translate: 0 var(--contact-copy-y,0px); }
.page-motion .contact-builder { translate: 0 var(--contact-form-y,0px); }
@media(prefers-reduced-motion:reduce) {
 .page-motion .hero-copy,.page-motion .automation-stage,.page-motion .hero-glow,
 .page-motion .card-visual,.page-motion .section-heading,.page-motion .integration-copy,
 .page-motion .contact-copy,.page-motion .contact-builder { translate:none; rotate:none; }
 .page-motion .integration-board,.page-motion .ai-core { scale:1; }
 .page-motion .ui-data span,.page-motion .flow-visual > span,
 .page-motion .method-steps article::before { transform:none; }
}